当前位置: 首页 > Web前端 > HTML

VUE巧妙地使用$attrs和inheritAttrs来提高组件的可扩展性

时间:2023-03-28 12:02:22 HTML

VUE巧妙地使用$attrs和inheritAttrs来提高组件的可扩展性将值赋值给标签来控制组件中的内容。这种方法在使用时扩展性不是很好,很难通过外部在组件内部动态添加或修改标签属性。这时候可以使用$attrs和inheritAttrs来增加组件的扩展性。以下步骤以自己封装的myInput组件为例。这里使用div包来添加更多内容。

当你需要在登录页面使用这个myInput组件时,一个输入文本,一个输入密码,这时候你想直接设置类型从外部控制myInput组件中的输入标签。但是如果我们直接把type属性写在myInput组件上,会发现type属性是直接传递给myInput组件的根元素div,并不会被设置到标签上的输入。//运行结果
这时候需要设置一个特殊的属性inheritAttrs=false(官方定义入口),该属性的设置是为了禁止传入的属性被添加到组件的根元素中。禁止传入值添加到根元素后,需要将传入值赋值给input标签。这时候可以在input标签上设置一个v-bind=$attrs,将传入的值添加到input的标签中。这个$attrs(官方定义入口)包含在传入组件的属性中,除了props中定义的属性外,其他都包括通过设置这两个属性,实现配置输入标签的功能。