Vue3中非 Prop 的 Attribute

2021年08月16日 23:59 · 阅读 278

什么是非 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 上却多了一个属性

再回过头去看前面的定义明白了，但是这个功能有什么用呢？

修改组件的调用方式

  <child id="child" class="clild-class" style="background: green"></child>
复制代码

这时打开页面发现类名和样式直接作用在了 div 上，可以在组件外部直接修改组件根元素的属性，最常用的就是修改样式

那要是子组件的根元素也有相同的属性呢？

修改子组件

<div id="my-child" class="base-class" style="color: red"></div>
复制代码

打开浏览器观察

class 和 style 两个属性做了合并，而 id 做了替换。其实规则就是除 class 和 style 属性合并之外，其他属性做替换操作

那假设根元素是两个元素，这些属性该给谁呢？

答案是谁都不给并且给出 warning

有一个需求要封装一个带有提示的 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 理解起来还是非常简单的，但是在自定义组件中却发挥着重要的作用