vue跨组件传参provide/Inject

2022-06-17 18:05:35 阅读：171 来源： 互联网

标签：传参 vue title provide default inject 组件 message

通常情况下，父组件向孙组件传递数据，可以采用父子props层层传递，也可以使用bus和Vuex直接交互。在Vue2.2.0之后，Vue还提供了provide/inject选项

这对选项允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

也就是说，在父组件只要声明了provide，在其子组件，孙组件，曾孙组件等能形成上下游关系的组件中交互，无论多深都能通过inject来访问provider中的数据。而不是局限于只能从当前父组件的prop属性来获取。注意他只做祖先通后代的单向传递的一个办法。有人这么形容：

provide就相当于加强版父组件prop，可以跨越中间组件，inject就相当于加强版子组件的props

# 案例展示

在父组件中provide提供变量

<template>
  <div>
    <p>{{ title }}</p>
    <son></son>
  </div>
</template>
<script>
  import Son from "./son"
  export default {
    name: 'Father',
    components: { Son },
    // provide选项提供变量
    provide: {
      message: 'provided by father',      //也可传入方法editList: this.editList

    },
    data () {
      return {
        title: '父组件'
      }
    },
    methods: { ... }
  }
</script>

在子组件中，我们故意不使用任何父组件的信息

<template>
  <div>
    <p>{{ title }}</p>
    <grand-son></grand-son>
  </div>
</template>
<script>
import grandSon from "./grandSon "
export default {
  name: "Son",
  components: { grandSon },
  data () {
    return {
      title: '子组件'
    }
  },
};
</script>

在孙组件中，使用inject来注入

<template>
  <div>
    <p>message：{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "GrandSon",
  inject: [ "message" ],

  data () {
    return {
      title: '孙组件'
    }
  },
  methods: { ... }
};
</script>

结果孙组件页面显示：
message: provided by father

//孙子组件接收

inject: { 　//传方法 editList: { type: Function, default: () => undefined } },

链接：https://www.jianshu.com/p/6651dccd282c

标签：传参,vue,title,provide,default,inject,组件,message
来源： https://www.cnblogs.com/ygyy/p/16386665.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue跨组件传参provide/Inject

# 案例展示