• $attrs是在vue的2.40版本以上添加的。
  • 项目中有多层组件传参可以使用$attrs,可以使代码更加美观,更加简洁,维护代码的时候更方便。如果使用普通的父子组件传参prop和$emit,$on会很繁琐;如果使用vuex会大材小用,只是在这几个组件中使用,没必要使用vuex;使用事件总线eventBus,使用不恰当的话,有可能会出现事件多次执行。
  • 如果给组件传递的数据,组件不使用props接收,那么这些数据将作为组件的HTML元素的特性,这些特性绑定在组件的HTML根元素上
  • inheritAttrs: false的含义是不希望本组件的根元素继承父组件的attribute,同时父组件传过来的属性(没有被子组件的props接收的属性),也不会显示在子组件的dom元素上,但是在组件里可以通过其$attrs可以获取到没有使用的注册属性, ``inheritAttrs: false`是不会影响 style 和 class 的绑定

以上解释可能有点抽象,下面用举例来详细解释:

在不使用$attrs的情况下,在父组件中使用子组件并给子组件关联数据,子组件如果不使用props接收数据,那么这些数据就会作为普通的HTML特性应用在子组件的根元素上,也就是class="content"上,但我们想要实现的是将type属性绑定给input。

// 子组件
<template>
    // class="content"为该组件的根HTML节点
	<div class="content">
		<input />
	</div>
</template>

<script>
export default {
	props: {},
};
</script>

// 父组件调用:给子组件绑定属性,设置type类型
<myInput type="text"></myInput>
<myInput type="password"></myInput>

 如果想实现将type属性绑定给input,可以再input标签中加上v-bind="$attrs"

<template>
	<div class="content">
		<input v-bind="$attrs" />
	</div>
</template>

<script>
export default {
	props: {},
	inheritAttrs: false,
	// 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性
	// 注意props里的参数名称不能改变,必须和父组件传递过来的是一样的
};
</script>

 此时,在子组件上传递的数据成功绑定到了input上,$attrs实际上保存了所有传递给该组件的属性

在此提醒一下props和$attrs的区别:

1.props需要先声明才能获取值,而attrs则不用

2.props声明过的属性,attrs里面不会在出现

3.props不包含事件,attrs包含

4.props支持string以外的类型,而attrs只有string类型

// 子组件
<template>
	<div class="content">
		<input v-bind="$attrs" :value="value" />
		<span>{{ $attrs }}</span>
	</div>
</template>

<script>
export default {
	props: {
		value: {
			type: String,
			default: "",
		},
	},
	inheritAttrs: false,
	// 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性
	// 在本组件中需要接收从父组件传递过来的数据,注意props里的参数名称不能改变,必须和父组件传递过来的是一样的
};
</script>

// 父组件
<myInput type="text" :value="111"></myInput>
<myInput type="text" :value="222"></myInput>

 可以看出,$attrs中并不包含props中定义的属性。

 

Logo

前往低代码交流专区

更多推荐