什么是非 Prop 的 Attribute
官网给出了这样的定义:一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 props
或 emits
定义的 attribute 。常见的示例包括 class
、style
和 id
属性。
这看起来太晦涩了,直接用例子说话
export default {
props: ['attribute'],
setup(props) {
console.log(props.attribute)
}
}
复制代码
首先定义一个组件,它接收名字为 attribute
的属性
<child attribute="test"></child>
复制代码
此时打开控制台,会输出 test
假设在子组件中删掉 props: ['attribute'],
这一行呢?
这时控制台打印出 undefined
,但是子组件的 dom 上却多了一个属性
再回过头去看前面的定义明白了,但是这个功能有什么用呢?
非 Prop 的 Attribute的作用
修改组件的调用方式
<child id="child" class="clild-class" style="background: green"></child>
复制代码
这时打开页面发现类名和样式直接作用在了 div
上,可以在组件外部直接修改组件根元素的属性,最常用的就是修改样式
那要是子组件的根元素也有相同的属性呢?
非 Prop 的 Attribute的合并规则
修改子组件
<div id="my-child" class="base-class" style="color: red"></div>
复制代码
打开浏览器观察
class
和 style
两个属性做了合并,而 id
做了替换。其实规则就是除 class
和 style
属性合并之外,其他属性做替换操作
非 Prop 的 Attribute的错误使用
那假设根元素是两个元素,这些属性该给谁呢?
答案是谁都不给并且给出 warning
禁用 Attribute 继承
有一个需求要封装一个带有提示的 input 组件,根元素必须有两个
<input type="text" />
<p>用户名为必填项</p>
复制代码
我想在调用的时候可以自己配置 input 的 placeholder
<input-with-tip placeholder="请输入用户名"></input-with-tip>
复制代码
这时一定会报错,首先解决报错的问题
export default {
inheritAttrs: false,
setup() {}
}
复制代码
在组件内部添加 inheritAttrs: false
属性,表示我不希望组件的根元素继承 attribute
此时解决了报错问题,然而 input 上依旧什么都没有,再修改子组件中 input 元素
<input type="text" v-bind="$attrs">
复制代码
v-bind="$attrs"
意思是将父组件传入的属性绑定在特定组件上
查看浏览器,达到最终效果
写在后面
非 Prop 的 Attribute 理解起来还是非常简单的,但是在自定义组件中却发挥着重要的作用