Vue之混入(mixins)

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。

 //1.定义一个mixins对象
  var countConsole = {
    data() {
      return {
      message: 'hello',
      foo: 'abc'
      }
    },
  }

export default {
  data(){
    return{
      message: 'goodbye',
      bar: 'def'
    }
  },
  //2.注册mixins对象
  mixins:[countConsole],
  created(){
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
}

混入对象的构造函数将在组件自身构造函数之前调用

//1.定义一个mixins对象
  var countConsole = {
    created(){
      console.log("这是mixins的内容")
    }
  }
export default {
  //2.注册mixins对象
  mixins:[countConsole],
  created(){
    console.log("这是原生内容")
  }
}

全局混入
也可以全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。

import Vue from 'vue'

  Vue.mixin({
    created(){
      console.log("这是全局内容")
    },
    methods:{
      bar(){
        console.log("hello World")
      }
    }
  })

全局和原生同时引入普通方法，执行的是原生里面的普通方法：

<script>
  //全局
  import Vue from 'vue'
  Vue.mixin({
    methods:{
      bar(){
        console.log("hello World")
      }
    }
  })

  //1.定义一个mixins对象
  var countConsole = {
    methods:{
    bar(){
      console.log("countConsole")
    }
  }
  }

export default {
  //2.注册mixins对象
  mixins:[countConsole],
  methods:{
    bar(){
      console.log("构造")
    }
  }
}
</script>