0
//mixins.js
var MyPlugin  = {}
MyPlugin.install = function(Vue,options){
  Vue.mixin({
    created: function () {
     console.log("996")
    }
  })
}
export default MyPlugin


//main.js
import components from './plugins/mixins.js'
Vue.use(components)

new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App),
})

我的需求是在项目全局注入一个console.log("996")方法,我在plugins文件夹下新建mixins.js文件,使用install方法创建插件,然后在main.js 引入。

目前的问题是当我第一次进入项目时,console.log('996')执行了3次,当我把Vue.use(components)这句代码放在main.js的最下面时,就只执行1次。

各位大神帮忙看下怎么回事呀

大宝 254
4 天前提问
2 个回答
0

你这个问题应该是对插件不熟悉吧。。

Vue.use 会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该插件。
0

Vue.mixin()的作用是在所有组件(Vue实例)中注入一个方法,你这样就是在所有组件的上新增了一个同名的created钩子函数,所以每个组件都会执行这个created方法,main.js中有一个vue根实例、App.vue一个组件、App.vue中应该还引入了一个组件,如果没有改的话应该是HelloWorld.vue组件,所以会执行3次。
全局注入方法可以将方法添加到Vue的原型上,如:
// main.js

    Vue.prototype.$log = function() { // 任何一个组件都可以通过this.$log()调用该全局方法
      console.log("996");
    }
    new Vue({
      created () {
        this.$log();
      },
      render: h => h(App),
    }).$mount('#app');

撰写答案

推广链接