mixins可写入的模块
mixins可写入组件export default 中的所有内容。data , methods , components , computed 和 钩子函数。这些内容会根据不同的规则融合到组件中。
data,methods和components
在组件中可以调用的data为本身的data和mixins中data的并集 , 如果data的键冲突,以组件本身的值为准;
methods和components同理
钩子函数
组件和minxins中的钩子函数都会被执行,mixins在组件之前。

例子
<template>
<div id="">
<input v-model="msg"/>
</div>
</template>
<script>
var mixin = {
data(){
return {
msg:'mixins:msg',
name:'mixins:name'
}
},
methods: {
hello() {
console.log('mixin:hello')
}
},
beforeCreated(){
console.log("mixins:beforeCreated");
},
created() {
console.log("mixins:created");
},
beforeMount(){
console.log("mixins:beforeMount");
},
mounted(){
console.log("mixins:mounted");
},
beforeUpdate(){
console.log("mixins:beforeUpdate");
},
updated(){
console.log("mixins:updated");
},
beforeDestory(){
console.log("mixins:beforeDestory");
},
destoryed(){
console.log("mixins:destoryed");
}
}
export default {
mixins: [mixin],
data() {
return {
msg:'组件msg'
}
},
methods: {
hello() {
console.log('组件:hello')
}
},
beforeCreated(){
console.log("组件:beforeCreated");
},
created() {
console.log("组件:created");
},
beforeMount(){
console.log("组件:beforeMount");
},
mounted(){
console.log("组件:mounted");
console.log(this.$data);
},
beforeUpdate(){
console.log("组件:beforeUpdate");
},
updated(){
console.log("组件:updated");
},
beforeDestory(){
console.log("组件:beforeDestory");
},
destoryed(){
console.log("组件:destoryed");
}
}
</script>
网友评论