Vue中的Attributes,详细分析
Attributes 继承
“透传 attribute”指的是传递给一个组件,却没有被该组件声明为 props 或 emits 的 attribute 或者
v-on
事件监听器。最常见的例子就是class
、style
和id
。当一个组件以单个元素为根作渲染时,透传的 attribute 会自动被添加到根元素上。举例来说,假如我们有一个
<MyButton>
组件,它的模板长这样:<!-- <MyButton> 的模板 --> <button>click me</button>
一个父组件使用了这个组件,并且传入了
class
:<MyButton class="large" />
最后渲染出的 DOM 结果是:
<button class="large">click me</button>
这里,
<MyButton>
并没有将class
声明为一个它所接受的 prop,所以class
被视作透传 attribute,自动透传到了<MyButton>
的根元素上。对
class
和style
的合并如果一个子组件的根元素已经有了
class
或style
attribute,它会和从父组件上继承的值合并。如果我们将之前的<MyButton>
组件的模板改成这样:<!-- <MyButton> 的模板 --> <button class="btn">click me</button>
则最后渲染出的 DOM 结果会变成:
<button class="btn large">click me</button>
v-on
监听器继承同样的规则也适用于
v-on
事件监听器:<MyButton @click="onClick" />
click
监听器会被添加到<MyButton>
的根元素,即那个原生的<button>
元素之上。当原生的<button>
被点击,会触发父组件的onClick
方法。同样的,如果原生button
元素自身也通过v-on
绑定了一个事件监听器,则这个监听器和从父组件继承的监听器都会被触发。深层组件继承
有些情况下一个组件会在根节点上渲染另一个组件。例如,我们重构一下
<MyButton>
,让它在根节点上渲染<BaseButton>
:<!-- <MyButton/> 的模板,只是渲染另一个组件 --> <BaseButton />
此时
<MyButton>
接收的透传 attribute 会直接继续传给<BaseButton>
。请注意:
透传的 attribute 不会包含
<MyButton>
上声明过的 props 或是针对emits
声明事件的v-on
侦听函数,换句话说,声明过的 props 和侦听函数被<MyButton>
“消费”了。透传的 attribute 若符合声明,也可以作为 props 传入
<BaseButton>
。
禁用 Attributes 继承
如果你不想要一个组件自动地继承 attribute,你可以在组件选项中设置
inheritAttrs: false
。最常见的需要禁用 attribute 继承的场景就是 attribute 需要应用在根节点以外的其他元素上。通过设置
inheritAttrs
选项为false
,你可以完全控制透传进来的 attribute 被如何使用。这些透传进来的 attribute 可以在模板的表达式中直接用
$attrs
访问到。<span>Fallthrough attribute: {{ $attrs }}</span>
这个
$attrs
对象包含了除组件所声明的props
和emits
之外的所有其他 attribute,例如class
,style
,v-on
监听器等等。有几点需要注意:
和 props 有所不同,透传 attributes 在 JavaScript 中保留了它们原始的大小写,所以像
foo-bar
这样的一个 attribute 需要通过$attrs['foo-bar']
来访问。像
@click
这样的一个v-on
事件监听器将在此对象下被暴露为一个函数$attrs.onClick
。现在我们要再次使用一下之前小节中的
<MyButton>
组件例子。有时候我们可能为了样式,需要在<button>
元素外包装一层<div>
:<div class="btn-wrapper"> <button class="btn">click me</button> </div>
我们想要所有像
class
和v-on
监听器这样的透传 attribute 都应用在内部的<button>
上而不是外层的<div>
上。我们可以通过设定inheritAttrs: false
和使用v-bind="$attrs"
来实现:<div class="btn-wrapper"> <button class="btn" v-bind="$attrs">click me</button> </div>
小提示:没有参数的 v-bind 会将一个对象的所有属性都作为 attribute 应用到目标元素上。
多根节点的 Attributes 继承
和单根节点组件有所不同,有着多个根节点的组件没有自动 attribute 透传行为。如果
$attrs
没有被显式绑定,将会抛出一个运行时警告。<CustomLayout id="custom-layout" @click="changeValue" />
如果
<CustomLayout>
有下面这样的多根节点模板,由于 Vue 不知道要将 attribute 透传到哪里,所以会抛出一个警告。<header>...</header> <main>...</main> <footer>...</footer>
如果
$attrs
被显式绑定,则不会有警告:<header>...</header> <main v-bind="$attrs">...</main> <footer>...</footer>
在 JavaScript 中访问透传 Attributes
如果需要,你可以通过
$attrs
这个实例属性来访问组件的所有透传 attribute:export default { created() { console.log(this.$attrs) } }
原文地址:https://blog.csdn.net/nibabaoo/article/details/137276833
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!