Vue组件间通信-- $attrs与$listeners/6

 $attrs与$listeners

祖先传递数据给子孙

 

如果要C组件要使用A组件的方法或者数据.要不用props传递(繁琐),要不用eventBus或者vuex(大材小用)

利用 $attrs 实现祖孙组件间的数据传递， $listeners 实现祖孙组件间的事件监听

$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

我的理解：

接收除了props声明外的所有绑定属性（class、style除外）

父组件
<template>
	<div id="app">
		<Hear type="text" placeholder="请输入用户名" v-model="msg"></Hear>
		<Hear type="password" placeholder="请输入密码"></Hear>
	</div>
</template>

<script>
import Hear from "@/components/hear/index.vue";
export default {
	name: "App",

	components: {
		Hear,//子组件
	},
	data() {
		return {
			msg:'hello'
		}
	},
};
</script>

父组件中v-model="msg",相当于:value='msg',也就是props传值

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

<script>
export default {
	inheritAttrs: false,
};
</script>

 

父组件中:直接给子组件传 type="text" placeholder="请输入用户名" v-model="msg"  这些数据, 子组件没有用peops接收,

而是用V-bind='$attrs',接收了所有父组件给传过来的属性,

inheritAttrs:是否将属性添加到根节点上,默认为true

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

<script>
export default {
	inheritAttrs: false,
	props:['value'],//用props接收了父组件的msg
};
</script>

 当子组件用props接收了msg,那么$attrs就不存在这个属性了

 如何给孙子传

 在子组件用v-bind="$attrs"接收,然后再孙子组件展开就可以

子组件
<template>
	<div class="container">
		<Sunzi v-bind="$attrs"/>
	</div>
</template>

<script>
import Sunzi from "./sunzi";

export default {
	components:{  Sunzi },
};
</script>

$listeners

 父组件用自定义事件的方法向子组件传递方法

父组件
<template>
	<div id="app">
		<Erzi @child2Info="getInfo"></Erzi>
	</div>
</template>

<script>
import Erzi from "@/components/erzi/index.vue";
export default {
	name: "App",
	components: {
		Erzi,//子组件
	},
	methods: {
		getInfo(data) {
			console.log(data);
		}
	}
};

 子组件不用,直接用v-on='$listenters',传递给孙子

子组件
<template>
	<div class="container">
		<Sunzi v-on="$listeners"/>
	</div>
</template>

<script>
import Sunzi from "./sunzi";

export default {
	components:{  Sunzi },
};
</script>

 孙子组件触发自定义事件($emit('自定义事件名',数据))

孙子组件
<template>
	<div class="container">
	  <button @click="$emit('child2Info','这个是孙子组件')">调用祖先的方法</button>
	</div>
</template>