mixin
mixin就是全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。例如给全部文件添加一些公用的实例(如方法、过滤器等)
插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用。
先定义mixin.js
const mixin = {
methods: {
two(num){
return num*num
}
}
}
export defaullt mixin
在main.js文件全局引入
import mixin from './mixin'
Vue.mixin(mixin)
其他vue页面里面就可以使用mixin里面定义好的方法,如:
data() {
return {
name: "abc",
square: this.two(3)
}
}
mixins
mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项,他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。
mixins和普通情况下引入组件有什么区别?
组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。
而mixins则是在引入组件之后,则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。
- 单纯组件引用:
- 父组件 + 子组件 >>> 父组件 + 子组件
- mixins:
- 父组件 + 子组件 >>> new父组件
值得注意的是,在使用mixins时,父组件和子组件同时拥有着子组件内的各种属性方法,但这并不意味着他们同时共享、同时处理这些变量,两者之间除了合并,是不会进行任何通信的