vue组件——混入

混入

  前边介绍了组件，我们知道组件包含三个部分 ，HTML 模板、js、css；但是，有时候，我们的模板可能是不同的，但是执行的方法和需要的数据类似，这时候，我们可以使用混入 Mixins。

  混入(Mixins) 通常是一个 js 文件，但是其中可以写 vue 组件的 js 部分的任何内容，包括 data, methods, 和各个生命周期等。

1. 定义 mixins

   新建一个 js 文件

   export default {
       data() {
           return {
               name: 'mixins',
               message: 'mixins demo js'
           }
       },
       created() {
           console.log('mixins created')
       },
       mounted() {
           console.log('mixins mounted')
       },
       methods: {
           say() {
               console.log('say mixins')
           }
       }
   }
   

2. 组件中引入，并局部声明

   <template>
       <div>
         <h1>HOME</h1>
           <input v-model="name">
   
           <button @click="say">say</button>
       </div>
   </template>
   
   <script>
       import Mixin from './mixin'
       export default {
           name: "Home",
           mixins: [
             Mixin
           ],
           data() {
               return {
                   name: 'home'
               }
           },
           created() {
             console.log('home vue created')
           },
           mounted() {
             console.log('home vue mounted')
           },
           methods: {
               say() {
                 console.log('say home vue')
               },
               changeName(name) {
                   this.name = name
               }
           }
       }
   </script>
   

3. 全局引入

   除了上边局部引入方式外，和组件一样，混入也可以注册为全局的；在 main.js 中引入之后，直接使用 Vue.mixin(Mixin) 即可

混入合并策略

1. 如果组件中的数据和混入重复，会以组件中数据优先
2. 声明周期，如果重复，会映射成一个数组，也就是都会执行
3. methods，components，directive 将被混合为一个对象，如果对象属性重复，即：methods 中有同名的方法，将取组件中的属性。