provide/reject多组件嵌套传值

多组件嵌套传值

现在用组件A 、组件B、组件C三个组件

一、组件嵌套
1.组件A（相当于父组件），在组件A调用组件B

<template>
  <div>
　　<componentb></componentb>
  </div> 
</template>
<script>
 import Componentb from '../components/componentb.vue' // 引用组件
 export default { 
　　name: "ComponentA", //组件名称
　　components:{ Componentb }, // 定义组
　　provide: { valuea: "provide" } // 设置传值给组件B
}
</script>

2.组件B（相当于子组件)，在组件B中调用组件C

<template>
  <div>
　　<componentc></componentc>
  </div> 
</template>
<script>
 import Componentc from '../components/compoentc.vue' // 引用组件
 export default { 
　　name: "ComponentB", //组件名称 　　
　　components:{ Componentc }, // 定义组 　　
   reject: ['value'], //获取父组件传递的值
　　provide: { valueb: "provide" } // 设置传值给组件C 
　　data(){
　　　　return： {
　　　　　　providevalue：this.valuea
　　　　}
　　}
} 
</script>

3.组件C（相当于孙组件）在组件c中获取值

<template>
  <div>
　　{{valueb}}
  </div> 
</template>
<script>
 export default { 
　　name: "ComponentC", //组件名称
　　reject：["valueb"],　// 获取传值
}
</script>

二、多层插槽嵌套组件同样适用
组件A

<template>
　　<div>　　
　　　　<componentb>
　　  　　　　<componentc/>
　　　　</componentb>
  </div> 
</template>
<script>
 import Componentb from '../components/componentb.vue'
 import Componentc  from '../components/componentc.vue'
// ↑引用组件
 export default { 
　　name: "ComponentA", //组件名称
　　components:{ Componentb，Compoentc }, // 定义组
　　provide: { valuea: "provide" } // 设置传值
}
</script>

组件B

<template>
  <div>
　　<slot/>
  </div> 
</template>
<script>
 export default { 
　　name: "ComponentB", //组件名称 　　
　　components:{ Componentc }, // 定义组 　　
   reject: ['value'], //获取父组件传递的值
　　provide: { valueb: this.providevalue }, // 设置传值给组件C 
　　data(){
　　　　return： {
　　　　　　providevalue：this.valuea
　　　　}
　　}
} 
</script>

组件C

<template>
  <div>
　　{{providevalue}}
  </div> 
</template>
<script>
 export default { 
　　name: "ComponentC", //组件名称
　　reject：["providevalue"],　// 获取传值
}
</script>