应用场景:
两个组件,都需要用到同一个点击事件方法,此时使用mixin混入,可以很好的实现代码的复用。
在vue cli搭建的项目中,src目录下新建mixin.js文件:
// 对外暴露mixin对象
export const mixin = {
data() {
return {
msg: 'hello'
}
},
methods: {
click() {
alert('你点我了')
}
}
}
export const mixin2 = {
mounted() {
console.log('mounted');
}
}
App.vue中引入两个组件Student和School:
<template>
<div>
<School></School>
<Student></Student>
</div>
</template>
<script>
import School from './components/School'
import Student from './components/Student'
export default {
name: 'App',
components: {
School,
Student
}
}
</script>
<style>
</style>
1、局部混入mixin
Student和School两个组件中点击第一行的文字会弹出提示:‘你点我了’,组件中分别引入mixin混入,
Student.vue:
<template>
<div>
<p @click="click">学生姓名:{{name}}</p>
<p>学生年龄:{{age}}</p>
</div>
</template>
<script>
import {mixin} from '../mixin'
export default {
name: 'Student',
data() {
return {
name: 'Tom',
age: 18
}
},
mixins: [mixin]
}
</script>
<style>
</style>
School.vue:
<template>
<div>
<p @click="click">学校名称:{{name}}</p>
<p>学校地址:{{address}}</p>
</div>
</template>
<script>
import {mixin} from '../mixin'
export default {
name: 'Student',
data() {
return {
name: 'zz',
address: 'bj'
}
},
mixins: [mixin]
}
</script>
<style>
</style>
2、全局混入mixin
在main.js中引入暴露的mixin对象:
import {mixin} from './mixin'
// 引入多个mixin
import {mixin, mixin2} from './mixin'
// 全局混入
Vue.mixin(mixin)
// Vue.mixin(mixin2)
页面效果:
mixin对象中的msg也会混入到Vue实例和组件中。
如果想要同时引入两个混入,则使用下面的引入方式多引入一个变量即可:
import {mixin, mixin2} from '../mixin'
如果组件和混入mixin中同时有钩子函数如mounted,则均会执行。