$listeners和$attrs
- $listeners是将三级组件的事件和参数传递给一二级组件
- $attrs可以将一级组件的数据直接在三级组件中使用,比较优雅的一个传值方式,不用像props那么繁琐
在一级组件中引入二级组件,并将data和message传递给二级组件;getLevel3Messgae是三级组件中的事件
<template>
<!-- 一级组件 -->
<div class="level-1">
<!-- 二级组件 -->
<Level2 :data="data" :message="message" @getLevel3Messgae="getMessage" />
</div>
</template>
<script>
import Level2 from "./Level2";
export default {
name: "Home",
components: {
Level2,
},
data() {
return {
data: [
{
name: "zs",
age: 18,
},
],
message: "message",
};
},
methods: {
getMessage(data) {
console.log("level1: ", data);
},
},
};
</script>
二级组件中可以直接通过this.$attrs的方式获取到一级组件中的值,并通过v-bind将attrs传递给三级组件;
并且可以通过v-on的方式将三级组件中的事件传递给一级组件
<template>
<!-- 二级组件 -->
<div class="level-2">
<!-- 三级组件 -->
<Level3 v-bind="$attrs" v-on="$listeners" />
</div>
</template>
<script>
import Level3 from "./Level3.vue";
export default {
components: { Level3 },
created() {
console.log("level2 attrs: ", this.$attrs);
console.log("level2 listeners: ", this.$listeners);
},
};
</script>
三级组件中就可以使用到一级组件传递下来的值
<template>
<div class="level-3">level3</div>
</template>
<script>
export default {
created() {
console.log("level3 attrs: ", this.$attrs);
},
mounted() {
this.$emit("getLevel3Messgae", "level3 message");
},
};
</script>