首页 > 其他 > 详细

vue之mixins的使用

时间:2020-07-01 12:10:21      阅读:54      评论:0      收藏:0      [点我收藏+]

mixins :是指混入对象,多个组件同时使用相同的变量和方法的时候,可以定义一个混入对象,可以减小代码的重复率,

   一个混入对象可以包含任意组件选项,同一个生命周期,混入对象会比组件的先执行。

一、main.js 中全局注册(不建议使用,全局注册之后会对所有组件都生效,影响比较大,项目大的情况下,建议使用局部注册)

Vue.mixin({
  mounted() {
    console.log(‘全局的minixs‘);
  }
});

打印的效果:

技术分享图片

二、组件内部注册

 ①新建mixins.js

const Mymixin = {
  data() {
    return {
      name: ‘chen‘,
      age: 123,
    }
  },
  created: function () {
    console.log(‘混入对象的钩子被调用‘)
    console.log(this.name)
  }
}
export default Mymixin

 ②组件内部引入

 import Mymixin from ‘./mixins.js‘;
.......
  export default {
    mixins: [Mymixin],
    created () {
        console.log(‘minixs中定义变量‘, this.age)
        console.log(‘组件内部定义‘, ‘11111‘)
    },
}

打印效果

技术分享图片

 在使用局部注册的时候,可同时引入多个混入对象,执行顺序和引入顺序一致,此处便不再赘述了。
见解不足之处,还望各位多多指教
 

vue之mixins的使用

原文:https://www.cnblogs.com/cjechenjinge-0820/p/13218311.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!