mixins是一种分发组件中可复用功能的非常灵活的方式
1.创建mixins
export const myMixins = {
components:{},
data() {
return {
msg:"mixins msg"
}
},
created(){
console.log("mixins created")
},
mounted() {
console.log("mixins mounted")
},
methods: {
handleClick() {
console.log("mixins 点击事件")
}
}
1.使用
<template>
<div>
<h1>{{msg}</h1>
<button @click="handleClick">点击事件</button>
</div>
</template>
<script>
import { myminxin } from "../mixins";
export default{
mixins:[myminxin],
data(){
return{
msg:"组件msg"
}
}
created() {
console.log("组件 created");
},
mounted() {
console.log("组件 mounted ");
},
methods:{
handleClick(){
console.log("组件点击事件")
}
}
}
</script>
合并冲突
- 值为对象(components、methods 、computed、data)的选项,优先组件,混入对象会被覆盖
- 值为函数(created、mounted)的选项,混入先调用,组件的后调用