服务器之家

服务器之家 > 正文

在vue中使用inheritAttrs实现组件的扩展性介绍

时间:2021-12-07 15:53     来源/作者:gwenbi

1、首先我们创建一个input组件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
 <div class="inputCom-wrap">
 <input v-bind="$attrs" />
 </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue'
 
export default defineComponent({
 inheritAttrs:false,//不希望根直接继承特性,而是使用$attrs自定义继承,当前组件的根就是inputCom-wrap
 setup () {
 return {}
 }
})
</script>
 
<style scoped>
</style>

2、使用组件的时候,随便增加一些属性,如

<inputCom type="text" class="input-a"></inputCom>

<inputCom type="password" class="input-b"></inputCom>

3、查看最终的渲染结果为(与props不会冲突)

在vue中使用inheritAttrs实现组件的扩展性介绍

补充知识:vue组件深层传值inheritAttrs、$attrs、$listeners

1、$attrs

组件深层传值 可通过父组件绑定 v-bind="$attrs"传给子组件

一般子组件this.$attrs可以拿到父组件的所有传输的属性。

当子组件props注册了声明某属性之后,this.$attrs将不包含该属性;

同理通过v-bind="$attrs"绑定孙子组件也不会包含子组件props声明的属性。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
props: {
 data:{
 type: Array,
 default: () => [],//数组格式[{label:xx,value:xxx}]
 },
 value: {
 type: Array,
 default: () => [],//数组格式[xx,xx,xx]
 },
 maxHeight:{
 type:[String,Number],
 default:350,
 }
 },
 
mounted() {
 console.log("来自多选",this.$attrs)
 
 },

在vue中使用inheritAttrs实现组件的扩展性介绍

2、inheritAttrs

默认值为true

默认情况子组件props未声明,父组件传输的其他属性会被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上(有可能会覆盖子组件根元素上的某些属性列如 type="text"之类属性)

子组件的inheritAttrs 设置为false可以避免

在vue中使用inheritAttrs实现组件的扩展性介绍

3、$listeners

父组件-子组件-孙子组件,现在我要你在孙子组件里改变父组件的值,子组件直接绑定

<muti-select v-bind="$attrs" v-on="$listeners" class="select"></muti-select>

以上这篇在vue中使用inheritAttrs实现组件的扩展性介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/ag_wenbi/article/details/109021434

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部