vue中$attrs的使用

$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中定义的属性。

猜你喜欢