Vue混入

103 阅读1分钟

1.混入

局部混入

/* 把公共的内容放在mixinsA.js文件中 */

export default{

    data(){

        return{

            msg:'vue初始化完毕'

        }

    },

    created() {

        console.log(this.msg);

    },

    methods: {

        fn(){

            alert(this.msg)

            console.log('mixins ``');

        }

    },

APP页面导入局部

import mixinsA from '@/mixins/mixinsA'

export default {

  name:'App',

  /* 混入对象的钩子将在组件自身钩子之前调用 */

  mixins:[mixinsA],

  methods:{

    /* 数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先 */

    fn(){

      alert('app init')

    }

  }

}

全局混入,慎用

Vue.mixin({

  created:function(){

    console.log('全局init..');

  }

})

/* 用了全局混入会执行4遍,因为加载的时候会执行一遍main.js里面全局混入的内容,有三个页面需要使用,三个vue页面分别执行一遍 */