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 指令
