Vue $attrs 对象
示例
使用 $attrs 对象将 id 透传属性传递到 <p> 标签。
<template>
<h3>Tigers</h3>
<img src="/img_tiger_small.jpg" alt="tiger">
<p v-bind="$attrs">Tigers eat meat and not plants, so they are called carnivores.</p>
</template>
查看下方更多示例。
定义和用法
$attrs 对象表示在组件标签上设置的透传属性和事件侦听器。
当我们想要让元素继承在组件标签上设置的透传属性和事件侦听器时，我们在根元素上使用 v-bind="$attrs"。
$attrs 对象是只读的。
**透传属性** 是在组件标签上设置的属性（而不是 props），这些属性会透传到组件的根元素。如果组件中有多个根元素，我们使用 $attrs 对象来指定哪个元素应该继承透传属性。 在教程中了解有关透传属性的更多信息。
更多示例
示例 1
使用 $attrs 对象来显示透传属性 id 和 title 以及它们的值。
<template>
<h3>Tigers</h3>
<img src="/img_tiger_small.jpg" alt="tiger">
<p v-bind="$attrs">Tigers eat meat and not plants, so they are called carnivores.</p>
<hr>
<p><strong>Below is the content of the $attrs object:</strong></p>
<pre>{{ attrsObject }}</pre>
</template>
<script>
export default {
data() {
return {
attrsObject: null
}
},
mounted() {
console.log(this.$attrs);
this.attrsObject = this.$attrs;
}
}
</script>
<style>
#pink {
background-color: pink;
border-radius: 15px;
padding: 10px;
}
img {
width: 100%;
border-radius: 15px;
}
</style>
示例 2
在 <img> 标签上使用 $attrs 对象来接收来自父组件的事件侦听器。
<template>
<h3>Toggle Image Size</h3>
<p>Click the image to toggle the image size.</p>
<img v-bind="$attrs" src="/img_tiger_small.jpg" class="imgSmall">
</template>
<style>
.imgSmall {
width: 60%;
}
.imgLarge {
width: 100%;
}
img {
border-radius: 15px;
cursor: pointer;
}
</style>
相关页面
Vue 教程：Vue 透传属性
Vue 教程：Vue 方法
Vue 教程：Vue v-bind 指令
Vue 教程：Vue v-on 指令
Vue 参考：Vue v-bind 指令
Vue 参考：Vue v-on 指令
