小柒

www.xiaoqi.cn

0%

非Prop的attribute

发表于 更新于 分类于

一个非prop的attribute是指传向一个组件，但是该组件并没有相应props或emits定义的attribute,常见的包括class,style,id attribute，可以通过$attrs property访问那些attribute

Attribute继承

当组件返回单个根结点，非prop的attribute将自动添加到根结点的attribute中，

1
2
3
4
5
6
7
app.component('date-picker',{
    template:`
    <div class="data-picker">
    	<input type="datetime-local">
    </div>
    `
})
1
2
3
4
5
6
7
//具有非prop的attribute的date-picker组件
<date-picker data-status="activated"></date-picker>
//渲染后的date-picker组件
<div class="data-picker" data-status="activated">
    <input type="datetime-local"/>    
</div>

同理，事件监听器也会从父组件传递到子组件

1
<date-picker @change="submitChange"></date-picker>
1
2
3
4
5
6
7
8
9
app.component('date-picker', {
  template: `
    <select>
      <option value="1">Yesterday</option>
      <option value="2">Today</option>
      <option value="3">Tomorrow</option>
    </select>
  `
})

change事件在原生

禁用Attribute继承

如果不希望组件的根元素继承attribute,可以在组件的选项设置inheritAttrs:false

1
2
3
4
5
6
7
8
app.component('date-picker',{
    inheritAttrs:false,
    template:`
    <div class="date-picker">
      <input type="datetime-local" v-bind="$attrs" />
    </div>
    `
})

data-status attribute将用于Input元素

1
2
3
4
5
6
7
<!-- date-picker 组件使用非 prop 的 attribute -->
<date-picker data-status="activated"></date-picker>

<!-- 渲染后的 date-picker 组件 -->
<div class="date-picker">
  <input type="datetime-local" data-status="activated" />
</div>

多个根结点的Attribute继承

具有多个根结点的组件不具有自动attribute贯穿的行为，如果没有显示绑定$attrs，将发出运行时警告

参考vue官网：https://v3.cn.vuejs.org/guide/component-attrs.html