简略介绍
- 能够把多个组件共有的数据，办法，提取成一个混合文件
- data中数据本人和混合文件都有时，以本人的数据为主
- 生命周期还有办法这些都是独立的
全局混合
// 这样引入所有的页面，组件都会应用这个混合import mixin from './components/mixin/mixin'Vue.mixin(mixin)
部分混合
// 罕用援用形式// mixin.jsexport default { data() { return { mixData: '这是mixin中数据', x: 100, } }, created () { console.log(this.y) }, methods: { handleClick() { console.log(this.name) } }, computed: { showNumber() { return this.x + this.y } }}// 两个须要援用混合的组件// Student.vue<template> <div> <h1>{{ msg }}</h1> <div @click="handleClick">姓名：{{name}}</div> <div>年龄：{{age}}</div> <div>数字：{{showNumber}}</div> </div></template><script>import mixin from './mixin/mixin'export default { name: 'Student', data () { return { msg: 'Welcome', y: 100 } }, mixins: [mixin], props: { name: { type: String, requried: true }, age: { type: Number, default: 18 } }, created () { console.log(this.mixData) }}</script>// School.vue<template> <div> <h1>{{ msg }}</h1> <div @click="handleClick">姓名：{{name}}</div> <div>地址：{{address}}</div> <div>数字：{{showNumber}}</div> </div></template><script>import mixin from './mixin/mixin'export default { name: 'Student', data () { return { msg: 'Welcome', y: 200 } }, mixins: [mixin], props: { name: { type: String, requried: true }, address: { type: String, requried: true } }, created () { console.log(this.mixData) }}</script>