#全局混入

vicky.yu

你还可以为 Vue 应用程序全局应用 mixin：

const app = Vue.createApp({
  myOption: 'hello!'
})
// 为自定义的选项 'myOption' 注入一个处理器。
app.mixin({
  created() {
    const myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})
app.mount('#mixins-global') // => "hello!"
混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的组件 (例如，每个子组件)。

const app = Vue.createApp({
  myOption: 'hello!'
})
// 为自定义的选项 'myOption' 注入一个处理器。
app.mixin({
  created() {
    const myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})
// 将myOption也添加到子组件
app.component('test-component', {
  myOption: 'hello from component!'
})
app.mount('#mixins-global')
// => "hello!"
// => "hello from component!"
大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。