mixins php,Vue之mixin和mixins

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时，父组件和子组件同时拥有着子组件内的各种属性方法，但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的