混入器 mixin

混入器 mixin

混入器用于将vue组件中的option进行抽离

• 如果混合器混入的内容也有生命周期函数 那么组件内的生命周期函数会一起执行 且混入器先执行
• 对于除了生命周期的配置而言 如果跟混入的配置重叠 以组件自己声明的为准
• 全局混入的生命周期 优先级会大于局部混入的生命周期

 const m1={  //混入器可以配置所有的vue的配置项
    data() {
      return {
        version:'版本1.0.0'
      }
    },
    created() {
      console.log('我是mixin m1 的created')
    },
  }
  const m2={
    created(){
      console.log('我是mixin m2 的created');

    },
    methods: {
      fn1(){
        return '我是fn1 返回的字符串'
      }
      
    },

  }
   //全局混入
  Vue.mixin({
    data(){
      return{
        slogn:'我喜欢 weekend'
      }
    },
    created(){ //全局混入的生命周期 优先级会大于局部混入的生命周期
      console.log('我是全局混入的mixin');
    }
  })
  Vue.component('cp1', {
    template: `<div>
                    <div>version:{{version}}</div>
                    <div>fn1 : {{fn1()}}</div>
                    <div>全局混入{{slogn}}</div>
              </div>`,
    mixins:[m1,m2],
    data() {
      return {
        version:'版本1.0.5' //对于除了生命周期的配置而言 如果跟混入的配置重叠 以组件自己声明的为准
        
      }
    },
    created(){ //如果混入的内容也有生命周期函数 那么跟组件里的生命周期函数也会一起执行 混入器的先执行
      console.log('我是cp1的created');
    }
  })
  Vue.component('cp2', {
    template: `<div>
                    <div> version in cp2: {{version}}</div>
                    <div>全局混入{{slogn}}</div>

                </div>`,
    },
    mixins:[m1]

  })
  Vue.component('Parent', {
    template: `<div>
                    <cp1></cp1>
                    <cp2></cp2>
              </div>`,
  })
  new Vue({
    el: '#app',
  })