码迷,mamicode.com
首页 > 其他好文 > 详细

vue之mixins的使用

时间:2020-07-01 12:48:53      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:png   com   imp   生效   ima   pre   情况下   OLE   function   

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的使用

标签:png   com   imp   生效   ima   pre   情况下   OLE   function   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!