vue中混入mixin的理解与使用 | 您所在的位置:网站首页 › vue混入mixin › vue中混入mixin的理解与使用 |
混入 mixin
基础
混入(mixin)提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时。所有混入对象的选项将被混合进入该组件本身的选项。 mixin 的作用就是实现将多个组件或页面中公用的属性或方法抽取出来单独定义在 mixins 中,当组件中同时声明了和 mixins 中同名的属性或方法,组件里边的属性或方法优先级高于 mixins;当某个组件或页面引用了 minxins 里面的属性或方法,并进行了一些修改操作,这些操作只对当前组件本身有效,不会影响其他组件。 在 src 目录下新建 js 文件夹,新建 mixin.js 文件 let myMixins = { // 创建mixins对象,该对象可以有组件中的 data 和 methods 和 所有生命周期 data() { return { name: 'jackson', } }, created() { this.hello() }, methods: { hello() { console.log('我是混入对象mixins') } } } export default myMixins;组件目录 当在需要用到 name 属性的组件中引用了 mixin 文件中的 name 属性 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行 “合并”。 比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先 如:给 childOne.vue 组件中设置 name 属性 |
CopyRight 2018-2019 实验室设备网 版权所有 |