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>
参考
阅读 81 · 发布于 2023-01-09
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
Linux 使用 dd 查看日志增长速度、方法每秒执行次数阅读 351
-
使用 Chrome 进行网页长截图阅读 2318
-
PhpStorm 设置大括号不换行阅读 6371
-
minikube start Unable to determine current user's administrator privileges阅读 194
-
Docker CMD ENTRYPOINT 区别阅读 732
-
Android 调节手机亮度阅读 4081
-
Android SharedPreferences 工具类阅读 3176
-
Android 小米,魅族 6.0 状态栏不能反色解决方法阅读 2982
-
Spring Boot OpenFeign IllegalStateException: RequestParam.value() was empty on parameter 0阅读 268
-
Golang 时间加减、计算方法耗、毫秒转 Time阅读 15336