背景
组件之间多层传递属性是一个比较常见的业务场景。如：
A --> B --> C --> D
A组件包含B组件，B组件又包含C组件，C组件包含D组件。
现在，状态维护在A组件中，通过props的方式层层传递到D组件，而D组件接收这个数据，并在内部修改这个数据后，再告之A组件。
<C v-bind="$attrs" v-on="$listeners"></C>
关键字
vue2.4 attrs listeners
image.png
逐层传递
简要列出代码如下：
A组件
<template lang="pug">
<div style="border:1px solid #ccc;padding:10px">
<h2>组件A 数据项:{{myData}}</h2>
<B @changeMyData="changeMyData" :myData="myData"></B>
</div>
</template>
<script>
import B from "./B";
export default {
data() {
return {
myData: "100"
};
},
components: { B },
methods: {
changeMyData(val) {
this.myData = val;
}
}
};
</script>
B组件
<template>
<div style="border:1px solid #ccc;padding:10px">
<h3>组件B</h3>
<C v-bind="$attrs" v-on="$listeners"></C>
</div>
</template>
<script>
import C from "./C";
export default {
components: { C },
};
</script>
C组件
<template>
<div style="border:1px solid #ccc;padding:10px">
<h4>组件C</h4>
<D v-bind="$attrs" v-on="$listeners"></D>
</div>
</template>
<script>
import D from "./D";
export default {
components: { D }
};
</script>
D组件
<template>
<div style="border:1px solid #ccc;padding:10px">
<h5>组件D</h5>
<input v-model="myd" @input="hInput" />
</div>
</template>
<script>
export default {
props: { myData: { String } },
created() {
this.myd = this.myData; // 在组件A中传递过来的属性
console.info(this.$attrs, this.$listeners);
},
methods: {
hInput() {
this.$emit("changeMyData", this.myd); // // 在组件A中传递过来的事件
}
}
};
</script>
优点
A(发起者) --> B(listeners) --> C(
listeners) -->D（使用者）
从顶层到使用层之间的层不再需要逐一列出来属性，只需要统一设置传递即可。
