时间戳

首页 > 解决方案 > 将全局附加到 Vue 实例

javascript - 将全局附加到 Vue 实例

问题描述

如何将全局过滤器/mixins/等附加到定义的 Vue 实例而不是 Vue 对象？

例子

import Vue from 'vue.js'
import App from './app'
import demo from './mixins/demo'

Vue.mixin(demo)

const vm = new Vue({
  router,
  render: h => h(App).$mount('#app')
})

在我有多个实例的情况下，如何将此 mixin 附加到vm而不是Vue 对象？

我试过vm.mixin(demo)但它似乎不起作用

标签： javascriptvue.jsvuejs2

解决方案

你的问题不是很清楚，但我觉得你想要的是在页面上有多个 Vue 根实例，每个实例都有自己的一组全局混合/指令/过滤器等。

不幸的是，Vue 2 的设计方式并没有让这一切变得容易。Vue3 迁移指南（引文）的Global API部分对此进行了很好的阅读：

Vue 2.x 有许多全局 API 和配置可以全局改变 Vue 的行为。

虽然这种方法很方便，但它会导致几个问题。从技术上讲，Vue 2 没有“应用程序”的概念。我们定义为应用程序的只是一个根 Vue 实例，通过new Vue(). 从同一个 Vue 构造函数创建的每个根实例共享相同的全局配置。因此：

全局配置使得同一页面上的多个“应用程序”之间难以共享相同的 Vue 副本，但具有不同的全局配置

这主要是（但不限于）测试期间的问题。为了解决这个问题，他们在 vue-test-utils 中引入了createLocalVue() 方法，该方法使用Vue.extend全局 API 创建基本 Vue 构造函数的“子类”......

所以我使用相同的方法在下面创建了一个示例，该示例显示了 2 个不同的 Vue 子类，每个子类都有自己的一组全局 mixin 和组件。它有点工作，但有它的怪癖（例如看看组件是如何注册的 - 省略MyVue1.extend调用会破坏代码）

我从这个练习中得出的结论是，它可以使用 Vue 2 来完成，但这可能是一条崎岖不平的道路，可能最好的解决方案是使用 Vue 3 来正确解决这些问题......

const MyVue1 = Vue.extend()
const MyVue2 = Vue.extend()

MyVue1.mixin({
  methods: {
    mixinMethod: function() {
      return 'MyVue1'
    }
  }
})

MyVue1.component('my-component1', MyVue1.extend({
  template: '<div> Hello from my-component1: {{ mixinMethod() }} !</div>'
}))

MyVue2.mixin({
  methods: {
    mixinMethod: function() {
      return 'MyVue2'
    }
  }
})

MyVue2.component('my-component2', MyVue2.extend({
  template: '<div> Hello from my-component2: {{ mixinMethod() }} !</div>'
}))

const vm1 = new MyVue1({
  template: '<my-component1 />',
}).$mount('#app1')

const vm2 = new MyVue2({
  template: '<my-component2 />',
}).$mount('#app2')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app1"></div>
<div id="app2"></div>

推荐阅读