时间戳

首页 > 解决方案 > globalProperties 上的 Vue3 反应式组件

vue.js - globalProperties 上的 Vue3 反应式组件

问题描述

在 vuejs 2 中，可以像这样将组件分配给主应用程序实例上的全局变量......

const app = new Vue({});

Vue.use({
  install(Vue) {
    Vue.prototype.$counter = new Vue({
      data: () => ({ value: 1 }),
      methods: {
        increment() { this.value++ },
      }
    });
  }
})

app.$mount('#app');

但是当我将它转换为 vue3 时，我无法访问任何属性或方法......

const app = Vue.createApp({});

app.use({
  install(app) {
    app.config.globalProperties.$counter = Vue.createApp({
      data: () => ({ value: 1 }),
      methods: {
        increment() { this.value++ }
      }
    });
  }
})

app.mount('#app');

这是 vue2 的示例... https://jsfiddle.net/Lg49anzh/

这是 vue3 版本... https://jsfiddle.net/Lathvj29/

所以我想知道这是否以及如何在 vue3 中仍然可行，或者我是否需要重构我所有的插件？

我试图使示例尽可能简单以说明问题，但如果您需要更多信息，请告诉我。

标签： vue.jsvuejs3

解决方案

Vue.createApp()创建一个应用程序实例，该实例独立于应用程序的根组件。

一个快速的解决方法是mount应用程序实例获取根组件：

import { createApp } from 'vue';

app.config.globalProperties.$counter = createApp({
  data: () => ({ value: 1 }),
  methods: {
    increment() { this.value++ }
  }
}).mount(document.createElement('div'));

演示 1

但是，更惯用和更简单的解决方案是使用ref：

import { ref } from 'vue';

const counter = ref(1);
app.config.globalProperties.$counter = {
  value: counter,
  increment() { counter.value++ }
};

演示 2

推荐阅读