Vue mixins 复用组件功能
Vue About 1,513 wordsmixins
混入(mixin
) 提供了一种非常灵活的方式,来分发Vue
组件中的可复用功能。
一个混入对象可以包含任意组件选项。
当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
选项合并
当组件和混入对象中的属性发生冲突时,会进行合并。
data
、computed
、watch
:以组件数据优先。
生命周期函数:mixins
优先,组件其次。
定义 mixins
定义mixins.js
文件,内容包含了Component
组件的data
、watch
、computed
、生命周期函数等。
export default {
data() {
return {
message: '混入对象',
info: {
username: "zhangsan",
age: 20,
address: null
}
}
},
computed: {
myMixinsComputed() {
return this.message + " my mixins computed"
},
},
created() {
console.log("mixins created")
},
mounted() {
console.log("mixins mounted")
},
destroyed() {
console.log("mixins destroyed")
},
}
引用 mixins
<template>
<div>
<p>
{{ message }}
</p>
<p>
{{ info }}
</p>
<p>
{{ myMixinsComputed }}
</p>
</div>
</template>
<script>
import mixins from "@/mixins/mixins";
export default {
name: "MyMixinsComponent",
mixins: [mixins],
data() {
return {
message: "my component",
}
},
created() {
console.log("my component created")
},
mounted() {
console.log("my component mounted")
},
destroyed() {
console.log("my component mounted")
}
}
</script>
输出
mixins created
my component created
mixins mounted
my component mounted
参考
Views: 969 · Posted: 2023-01-07
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...