Vue mixins 复用组件功能
Vue 大约 1513 字mixins
混入(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
参考
阅读 73 · 发布于 2023-01-07
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
Oracle 数据库连接异常 ORA-28001: the password has expired阅读 3082
-
Kubernetes Pod 控制器 ReplicaSet阅读 598
-
Kubernetes 包管理器 Helm阅读 669
-
面试题:Redis 有几种数据结构阅读 1159
-
Java 并发编程之 ThreadPoolExecutor 线程池源码解析阅读 971
-
Spring Boot 使用 Jib 打包成 Docker 镜像阅读 38
-
IDEA Debug 时模拟抛出异常阅读 838
-
OLTP 与 OLAP阅读 3439
-
JVM:运行时数据区之程序计数器阅读 510
-
Java 中 Thread 的 join 方法阅读 1478