Vue3中非 Prop 的 Attribute

·  阅读 278

什么是非 Prop 的 Attribute

官网给出了这样的定义:一个非 propattribute 是指传向一个组件,但是该组件并没有相应 props 或 emits 定义的 attribute 。常见的示例包括 classstyle 和 id 属性。

这看起来太晦涩了,直接用例子说话

export default {
  props: ['attribute'],
  setup(props) {
    console.log(props.attribute)
  }
}
复制代码

首先定义一个组件,它接收名字为 attribute 的属性

 <child attribute="test"></child>
复制代码

此时打开控制台,会输出 test

假设在子组件中删掉 props: ['attribute'], 这一行呢?

这时控制台打印出 undefined ,但是子组件的 dom 上却多了一个属性

WeChat39d056802abae22d1e1275e65d1c84f7.png

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

非 Prop 的 Attribute的作用

修改组件的调用方式

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

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

WeChat9ef8029a94eb65c3322d0bd3a5f4acbd.png

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

非 Prop 的 Attribute的合并规则

修改子组件

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

打开浏览器观察

WeChat327fdb3edb93cf0949f9d375a57ef7f1.png

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

非 Prop 的 Attribute的错误使用

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

WeChat8904f3a41ac38ae452c4326fb78aa678.png

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

禁用 Attribute 继承

有一个需求要封装一个带有提示的 input 组件,根元素必须有两个

<input type="text" />
<p>用户名为必填项</p>
复制代码

我想在调用的时候可以自己配置 inputplaceholder

<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" 意思是将父组件传入的属性绑定在特定组件上

WeChat4eca1dc34f4328b61b5162d80af81b93.png

查看浏览器,达到最终效果

写在后面

PropAttribute 理解起来还是非常简单的,但是在自定义组件中却发挥着重要的作用

分类:
前端
标签: