凡度网络北京网站建设公司,山东网站建设报价,asp网站知道用户名是admin,用html网站登录界面怎么做Vue Mixin 混入
1.简介
混入#xff08;mixin#xff09;提供了一种非常灵活的方式#xff0c;来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项#xff08;如data、methods、mounted等等#xff09;。当组件使用混入对象时#xff0c;所有混入对象的…Vue Mixin 混入
1.简介
混入mixin提供了一种非常灵活的方式来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项如data、methods、mounted等等。当组件使用混入对象时所有混入对象的选项将被“混合”进入该组件本身的选项。
2.基本使用
2.1 定义混入
首先在混入中定义的往往是可复用的内容因此一般会单独建立一个文件夹 mixin专门用于存放混入文件。 let testMixin {created() {console.log(这是testMixin中的created方法);},methods: {hello() {console.log(hello from testMixin!);}},
}export default testMixin2.2 使用混入 此时在主页组件 index.vue 中没有定义任何的 created、methods 或 mounted等但是此时打开控制台 说明此时执行了混入中定义的 created 方法
此时再为主页组件加上 mounted 生命周期钩子并在其中使用this.hello() 控制台打印出的结果为 即成功执行了混入对象中定义的方法 hello()也验证了当前组件中合并了混入对象中定义的选项和方法。这就是混入的基本使用。
2.选项合并
当组件和混入对象含有同名选项时这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并并在发生冲突时以组件数据优先。
仍然使用上面的例子我们在混入对象 testMixin 中已经定义了一个方法 hello()。那么如果此时我们在主页组件中再定义一个 hello() 方法mounted 中执行的会是哪一个 hello() 呢 最终控制台打印结果如下 此时同名的 created 生命周期钩子进行了合并合并为一个数组因此都将被调用。另外混入对象的钩子将在组件自身钩子之前调用。
而 methods 中的 hello 方法因为冲突在合并时保留组件中的hello即优先当前组件的选项因此打印的是“hello from home!”。
3.可复用性与全局混入
3.1 可复用性
开篇提过混入对象可成为一个可复用功能我们在另外的组件中引入已定义的混入对象可实现同样的逻辑与功能。
那么有个问题如果很多个组件同时使用同一个混入对象这时候都要重复一个步骤就是先导入混入对象然后再使用类似如下
script
import myMixins from ../mixins;
export default {mixins: [myMixins]
};
/script这样未免有点繁琐且代码冗余此时我们可以使用全局混入来优化这个问题。
3.2 全局混入
在 Vue 中混入也可以进行全局注册。
例如这里我们在 main.js 中通过Vue.mixin()引入混入对象后续即可全局使用作用于该Vue实例下的所有组件 然后在主页组件中将我们原来引入混入的代码删除 此时刷新页面查看控制台输出信息 仍然执行了混入中的方法其效果与在每个组件中单独引入混入对象相同这便是全局混入。 请谨慎使用全局混入因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下只应当应用于自定义选项就像上面示例一样。推荐将其作为插件发布以避免重复应用混入。
