1、多级组件间传值主要包括以下3种方法：
vuex：通过将多个组件共享的变量全部存储在对象store中并将这个对象放到顶层vue实例中，让其他组件可以随时使用store对象中的数据，其最大的优点是响应式。所以单纯的组件间传值使用vuex就有些大材小用了，vuex一般用于大型的项目。
provide/inject:vue2.2+版本支持，该属性必须一起使用，以达到祖先组件向其子孙组件提供一个依赖注入，不论组件层次多深，在上下游关系成立期间始终有效，多用于高阶组件封装，逻辑代码中慎用。
listeners:vue2.4+版本支持，
attrs会包含所有父作用域的绑定（style class除外），并且可以通过v-bind="
listeners包含父作用域中（不含.native修饰器的）v-on时间监听器，它可以通过v-on="$listeners"传入内部组件，在创建高层次组件时非常有用。
2、provide/inject详细介绍
示例：
<template>
<div>
<input v-model="inputName" />
<parent></parent>
</div>
</template>
<script>
import parent from "./parent.vue";
export default {
name: "swRegister",
components: {
parent,
},
data() {
return {
tdata: [
{
id: "1",
name: "dlj1",
},
{
id: "2",
name: "dlj2",
},
{
id: "3",
name: "dlj3",
},
],
inputName: "",
};
},
provide() {
return {
tdt: this.tdata, //传递数据
showMsg: this.showMsg, //传递方法
showInput: () => this.inputName, //实现响应式
};
},
methods: {
showMsg() {
console.log("祖父组件中定义的方法");
},
},
};
</script>
<template>
<div><child-t></child-t></div>
</template>
<script>
import childT from "./childT.vue";
export default {
components: { childT },
name: "parent",
data() {
return {};
},
};
</script>
<div>
<h3>{{ compH3 }}</h3>
<ul>
<li v-for="(item, index) in tdt" :key="index">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
name: "childT",
inject: ["tdt", "showMsg", "showInput"],
data() {
return {};
},
computed: {
compH3() {
return this.showInput();
},
},
mounted() {
this.showMsg();
},
};
</script>
控制台会输出“祖父组件中定义的方法”，说明provide/inject可以传递并注入数据和方法。另外，provide/inject邦迪不是响应式的（设计如此），但是当传入一个可监听的对象时，其对象属性是可以响应的，例如代码中inputName实现了响应式。
3、attrs/
attrs用于传递属性，
atttrs属性是否显示在标签上 ，false--不显示。
示例
祖组件
<template>
<div>
<h3>祖组件</h3>
<parent1
:p-child1="child1"
:p-child2="child2"
:p-child3="child3"
:p-child4="child4"
@test1="onTest1"
@test2="onTest2"
@test3="onTest3"
@test4="onTest4"
></parent1>
</div>
</template>
<script>
import parent1 from "./parent1.vue";
export default {
name: "searchDocument",
components: {
parent1,
},
data() {
return {
child1: "child1",
child2: "child2",
child3: "child3",
child4: "child4",
};
},
methods: {
onTest1() {
console.log("祖组件定义的方法--> onTest1 ");
},
onTest2() {
console.log("祖组件定义的方法--> onTest2 ");
},
onTest3() {
console.log("祖组件定义的方法--> onTest3 ");
},
onTest4() {
console.log("祖组件定义的方法--> onTest4 ");
},
},
};
</script>
父组件
<template>
<div>
<h3>父组件</h3>
<p>props:{{ pChild1 }}</p>
<p>$attrs:{{ $attrs }}</p>
<child1 v-bind="$attrs" v-on="$listeners"></child1>
</div>
</template>
<script>
import child1 from "./child1.vue";
export default {
components: { child1 },
name: "parent1",
data() {
return {};
},
props: ["pChild1"],
inheritAttrs: true,
mounted() {
this.$emit("test1");
},
};
</script>
子组件
<template>
<div>
<h3>子组件</h3>
<p>props:{{ pChild2 }}</p>
<p>$attrs:{{ $attrs }}</p>
<child2 v-bind="$attrs" v-on="$listeners"></child2>
</div>
</template>
<script>
import child2 from "./child2.vue";
export default {
components: { child2 },
name: "child1",
data() {
return {};
},
props: ["pChild2"],
inheritAttrs: false,
mounted() {
this.$emit("test2");
},
};
</script>
孙组件
<template>
<div>
<h3>孙组件</h3>
<p>props:{{ pChild3 }}</p>
<p>$attrs:{{ $attrs }}</p>
</div>
</template>
<script>
export default {
name: "child2",
data() {
return {};
},
props: ["pChild3"],
inheritAttrs: false,
created() {
this.$emit("test3");
},
mounted() {
console.log("chlild2 $attrs ", this.$attrs, this.$attrs.pChild4); //不能通过this.$attrs.pChild4访问属性
// this.pChild3 = "111";//错误 子组件不能修改父组件传递过来的值
this.$emit("test4");
this.$emit("test2");
},
};
</script>
3、补充
在 Vue 中，父子组件的关系可以总结为 props 向下传递，事件向上传递。父组件通过 props给子组件下发数据，子组件通过事件给父组件发送消息。
Props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
解决办法：
原理：将要更改的值，传递给父组件，在父组件中更改，再传递给子组件
步骤：
先将值传递给子组件，子组件 props 接收并使用，然后通过 $emit 广播一个事件给父组件，并将值一并传递，父组件 @子组件广播过来的事件，并定义一个方法，在该方法中，改变传递过来的值，父组件又会将值传递给子组件，这样就形成了一个闭环，问题得以解决。
子组件不能修改父组件传递过来的值的原因，就是因为vue的单向数据流限制，当然，这个限制是很有必要的，我们假设一个场景，父组件有多个子组件，都用到了某个传递的参数，其中一个子组件修改了父组件传递过来的值，那么其他的子组件接收到的也会是改变后的值，这样显然是不合理的。
既然不能直接修改，那么，我们不妨在子组件定义一个副本，用来接收父组件传递过来的值，子组件定义的每个参数，其作用域都只局限于当前组件，所以，直接修改副本，并不会影响其他子组件。
