VUE2混入的简单使用介绍

被混入的组件

混入对象

//================================================================================

//===:定义一个混入的对象

var vueMix = {

  data(){

    return{

      name:'赵光砚',

      age:16

    }

  },

  created(){

    console.log('我是混入对象的created');

    //===:由于混入对象的created和组件的created都进行了输出,当程序运行时,会输出

    //===:1.我是混入对象的created

    //===:2.我是组件的created

    //===总结:同名钩子函数混合为一个数组,因此都将会被调用,混入对象的钩子将在组件的钩子之前调用

  },

  mounted() {

    //===:这里调用了fn方法,但是fn输出的是

    //================================:我是组件里面的方法

    //===:总结:值为对象的混入，如metholds,components等，选项会被合并,组件对象覆盖混入的对象

    this.fn()

    //===:混入对象中没有fnConsoleLog1方法,但是被混入的组件中有这个方法,所可以调用到fnConsoleLog1方法

    //========================================================================================输出:1

    this.fnConsoleLog1()

  },

  methods: { 

    fn(){

      console.log("我是混入对象的方法")

    },

    fnConsoleLog2(){

      console.log(2)

    }

  },

}

export default vueMix