Vue组件配置mixin(混入)

mixin(混入)

1. 功能：可以把多个组件共用的配置提取成一个混入对象

2. 使用方式：

    第一步定义混合：

    ```

    {

        data(){....},

        methods:{....}

        ....

    }

    ```

    第二步使用混入：

    ​ 全局混入：```Vue.mixin(xxx)```

    ​ 局部混入：```mixins:['xxx']  ```

代码演示 

        我们在文件中定义了两个组件 两个组件具有相同的方法 这个时候我们就会使用混入对象 将公共的属性或者方法抽离到一个单独的文件夹 将定义的方法向外暴露

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

让后在两个组件中分别引入了配置好的文件 并将暴露的配置项通过mixins属性定义在了组件中

 这样在模板中就可以使用定义在公共文件里面的配置和方法了 

全局配置

在全局配置中我们在main.js中引入了 公共文件暴露的配置对象，通过Vue.mixin()方法将配置项定义在了全局中

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

// 引入需要混入的配置对象
import {hunhe,hunhe2} from './mixin'

//关闭Vue的生产提示
Vue.config.productionTip = false

// 通过Vue.mixin()将方法混入到全局
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

让后项目中所有的组件（包括vm）的实例对象身上都会出现 配置的属性或方法

在全局中都可以使用