vue项目开发中如何使用mixin混入

329 阅读1分钟

一、mixin混入的作用或者说使用场景;

它的主要作用就是,用于提取各个组件中的公共data,公共methods,让代码更好的复用;

二、mixin混入的具体使用方法;

主要有三个步骤:

一、创建一个混入js文件;(和main.js同级的文件)

mixin.js文件;(这个文件是和main.js同级的文件)

写有关内容项://只要组件实例对象中有的他都能够通过mixin来配置;

export const hunru = {
   methods:{
      showName(){
          alert(this.name)
      }
   }
}

二、引入mixin;

局部引入的话直接写在组件中就行,全局引入的话要写在main.js文件当中。

import {hunru} from '../mixin'

三、配置;

(1)、局部引入配置:

直接配置mixins,和data、methods是同级的;

mixins:[hunru]

(2)、全局引入写在main.js当中去;

Vue.mixin(hunru);
Vue.mixin(hunru1);//多个混合的话就写多次即可;