VUE组件通信-多层级组件通信(爷爷到孙子-传值)-PROVIDE&INJECT

components/Parent.vue
<template>
    <div>
        我是父组件
        <Son></Son>
    </div>
</template>

<script>
/*
provide:Object | () => Object
inject:Array<string> | { [key: string]: string | Symbol | Object }
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里
始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 
ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
inject 选项应该是:
一个字符串数组,或一个对象,对象的 key 是本地的绑定名,value 是:在可用的注入内容中搜索用的 key (字符串或 Symbol),
或一个对象,该对象的:from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
default property 是降级情况下使用的 value
 */
 import Son from '../components/Son';
    export default {
       components: {
           Son,
       },
        provide:{
            test:"test provide inject"
        }, 
    }
</script>
components/Son.vue
<template>
    <div>
        <hr>
        我是子组件
        <Grandson></Grandson>
    </div>
</template>

<script>
import Grandson from '../components/Grandson';
    export default {
        components: {
            Grandson,
        }
    }
</style>
components/GrandSon.vue
<template>
    <div>
        <hr>
        我是孙子组件
        <br>
        显示父组件provide中的test:{{test}}
    </div>
</template>

<script>
    export default {
        //孙子节点接收爷爷provide中定义的test
        inject:["test"],
    }
</script>
App.vue
<template>
  <div id="app">
    <Parent></Parent>
  </div>
</template>

<script>
import Parent from './components/Parent'

export default {
  name: 'App',
  components: {
    Parent,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

转载:https://blog.csdn.net/caoxinjian423/article/details/108961326

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注