如何使用自定义 Vue 实例注入 Vue 组件

Question

我见过一些使用自定义 Vue 实例来调用自己的 Vue 组件的插件。 就像是

this.$activateLoadingBar.options({color:"Green", msg:"loading"})

然后会弹出一个绿色的加载栏，其中包含“正在加载”作为其消息

我想尝试创造自己。 所以我制作了一个新组件并通过使用声明了一个自定义 Vue 实例

 Vue.prototype.$<name> = ...enter code here...

然后我完全迷失了。 我应该怎么做才能得到我需要的结果？ 我不知道这种方法叫什么，所以我无法搜索互联网。

Answer 1

您可以使用全局事件总线。 请参见下面的示例：

<template>
  <div>
    <button @click="sendMessageToChild">Send message to child</button>
    <HelloWord />
  </div>
</template>

<script>
import HelloWord from '@/components/HelloWord.vue';

export default {
  name: 'App',
  components: { HelloWord },
  methods: {
    sendMessageToChild() {
      this.$root.$emit('messageToChild', 'any text');
    },
  },
};
</script>

<template>
  <div>x = {{ message }}</div>
</template>

<script>
export default {
  name: 'HelloWord',
  data() {
    return {
      message: '',
    };
  },
  mounted() {
    this.$root.$on('messageToChild', text => (this.message = text));
  },
};
</script>

在此示例中，有两个组件（父级和子级）。 父组件调用子组件。

但是你可以改变这一点，孩子可以打电话给父母。

另一方面，您可以使用Vuex或Vue.observable 。 但如果你是初学者，这会更复杂。