Vue 透传 Attribute
Vue 大约 3349 字单个元素
自定义MyButton
组件。
<template>
<button class="btn">Click me</button>
</template>
<script>
export default {
name: "MyButton"
}
</script>
<style scoped>
.btn {
height: 10px;
color: blue;
}
</style>
引用MyButton
组件。
添加了class=large
属性,该属性直接透传到MyButton
的根元素button
上(template
是占位符不是根元素)。
large
会和button
上的btn
合并,最终class
为class="btn large"
。
<template>
<MyButton class="large"></MyButton>
</template>
<script>
import MyButton from "@/components/fallthrough-attributes/MyButton";
export default {
name: "ParentComponent",
components: {MyButton}
}
</script>
<style scoped>
.large {
height: 100px;
}
</style>
实际渲染的HTML
:
<button class="btn large">Click me</button>
组件中套组件
最外层传入的属性将透传到最底下组件。
MyButton
<template>
<BaseButton v-bind="$attrs" v-on="$listeners"></BaseButton>
</template>
<script>
import BaseButton from "@/components/fallthrough-attributes/BaseButton";
export default {
name: "MyButton",
components: {BaseButton},
inheritAttrs: false,
methods: {
onMyButtonClick() {
console.log("onMyButtonClick")
}
}
}
</script>
BaseButton
<template>
<button v-on="$listeners">Base button</button>
</template>
<script>
export default {
name: "BaseButton"
}
</script>
ParentComponet
<template>
<MyButton id="xxx" class="large" @click="onParentClick" test-attr="test-attr"></MyButton>
</template>
<script>
import MyButton from "@/components/fallthrough-attributes/MyButton";
export default {
name: "ParentComponent",
components: {MyButton},
methods: {
onParentClick() {
console.log("onParentClick");
},
}
}
</script>
多个元素
多个元素需要使用div
包裹一层,并且指定attr
和listeners
传入到指定的元素。
inheritAttrs: false
:表示不自动地继承attribute
(否则直接赋值在最外层div
)。
MyButton
<template>
<div class="btn-wrapper">
<button v-bind="$attrs" v-on="$listeners" id="yyy" class="btn" @click="onMyButtonClick">Click me</button>
<p>Fallthrough attribute: {{ $attrs }}</p>
<p>Fallthrough listeners: {{ $listeners }}</p>
</div>
</template>
<script>
export default {
name: "MyButton",
inheritAttrs: false,
methods: {
onMyButtonClick() {
console.log("onMyButtonClick")
}
}
}
</script>
<style scoped>
.btn {
height: 10px;
color: blue;
}
</style>
ParentComponent
<template>
<MyButton id="xxx" class="large" @click="onParentClick" test-attr="test-attr"></MyButton>
</template>
<script>
import MyButton from "@/components/fallthrough-attributes/MyButton";
export default {
name: "ParentComponent",
components: {MyButton},
methods: {
onParentClick() {
console.log("onParentClick");
},
}
}
</script>
<style scoped>
.large {
height: 100px;
}
</style>
最终 HTML
class=large
合并在最外层div
上,其余合并属性在button
上
<div class="btn-wrapper large">
<button id="yyy" test-attr="test-attr" class="btn">Click me</button>
<p data-v-6bf75713="">Fallthrough attribute: { "id": "xxx", "test-attr": "test-attr" }</p>
<p>Fallthrough listeners: {}</p>
</div>
参考
阅读 554 · 发布于 2023-01-09
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
MySQL ERROR 1193 (HY000): Unknown system variable 'validate_password_policy'阅读 6488
-
IDEA 配置 Kubernetes 可视化界面阅读 1240
-
走进 Rust:常量、变量、可变性、Shadowing阅读 2976
-
minikube 使用 Hyper-V 安装迷你版 Kubernetes 集群阅读 2129
-
网页文字不能复制解决方法阅读 2905
-
软考-系统架构设计师:供应链管理(SCM)阅读 2373
-
Linux tcpdump: no suitable device found阅读 2561
-
minikube start 指定 Kubernetes 集群阅读 655
-
OpenJDK 与 AdoptOpenJDK 的区别阅读 1971
-
PowerShell、CMD、Linux 命令换行阅读 653