解决vue多层组件之间通信
-
层级关系如下:
image.png
// top组件
<template>
<section>
<centers
v-bind="obj"
@isClick="isClick"
@asd="asd"
@getList="getList"
@aaaa.native="aaaa"
@click="handleClick"
></centers>
</section>
</template>
<script>
import centers from "./Centers";
export default {
components: {
centers,
},
data() {
return {
obj: {
name: "name",
age: "18",
gender: "666",
sdf: "asd",
sex: "女",
},
};
},
methods: {
asd(val) {
console.log(val);
},
isClick() {
console.log(666);
},
getList() {
console.log("刷新列表");
},
aaaa() {
console.log("我是aaaa");
},
handleClick() {
console.log("原生事件");
},
},
};
</script>
- 使用v-bind="
listeners"会将未识别的组件传入到子组件(除.native绑定的事件)
// center 组件
<template>
<section>
<bottom v-bind="$attrs" :sex="sex" v-on="$listeners"></bottom>
{{ sex }}
</section>
</template>
<script>
import bottom from "./Bottom";
export default {
components: {
bottom,
},
props: {
sex: "",
},
};
</script>
// bottom组件
<template>
<section>
<Last v-bind="$attrs" v-on="$listeners" />
<button @click="handleClick">bottom按钮</button>
bottom{{ $attrs }}
</section>
</template>
<script>
import Last from "./Last";
export default {
components: {
Last,
},
methods: {
handleClick() {
this.$listeners.getList();
},
},
};
</script>
// last组件
<template>
<div>
最后一个组件
<button @click="handleClick">按钮</button>
last{{ $attrs }}
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log(this.$attrs, this.$listeners);
this.$attrs.name = "刚刚好";
},
},
};
</script>
总结
1.v-bind="$props": 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。
vm.$props: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
2.v-bind="$attrs": 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。
vm.attrs" 传入内部组件——在创建高级别的组件时非常有用。
3.v-on="将父组件标签上的自定义事件向下传递其子组件可以直接通过emit(eventName)的方式调用。
vm.listeners" 传入内部组件——在创建更高层次的组件时非常有用。
