vue中mixin的理解与应用Mixin（混入）提供了一种非常灵活的方式在Vue组件中分发可重用的功能。混合对象可以包含任意组件选项。当组件使用mixin时，mixin的所有选项都将“混合”到组件自己的选项中。戳我查看官方文档，就是mixin在引入一个组件后，将组件内部的内容，如data、method等属性，与父组件对应的内容进行合并。相当于引入之后，扩展了父组件的各种属性方法。比如在两个不同的组件中调用sayHi方法需要重复定义。如果方法比较复杂，代码会比较冗余。借助mixin，变得很简单：首先在mixin.js文件中定义一个mixin对象：letmixin\={data(){return{userName:'mixin'}},created(){this.sayHello()},methods:{sayHello(){console.log(\`${this.userName},welcome\`)}}exportdefaultmixin然后定义两个组件，分别导入：那么两个组件的打印结果是：如果在两个组件data中定义了自己的userName，则打印结果中的userName将引用相应的组件。如果在两个组件方法中重复定义同一个方法，mixin中的方法就会被覆盖。为组件之一定义您自己的userName和sayHi方法::然后打印结果for：这有点像注册一个vue公共方法，可以在多个组件中使用，也有点像在原型对象中注册一个方法，可以定义一个同函数名的方法进行重写。混入也可以全局注册，但是一般不会全局使用，因为会污染vue实例。我通常在项目中使用它。例如，在多个组件中使用通用选择器。选项是：是，否。可以使用mixin添加统一的字典项过滤器来实现选项的回显。1.首先创建一个Dictionary.js文件保存字典项的意思并暴露出来：exportconstCOMMON_SELECT=[{code:0,label:'Yes'},{code:1,label:'No'}];注意：此处创建的Dictionary.js文件也可用于在呈现页面时循环选项。具体代码如下：import{COMMON\_SELECT}from'../constants/Dictionary.js'exportdefault{data(){return{comSelectOptions:COMMON\_SELECT}}}
