vue provide和inject 父组件和子孙通信

最新推荐文章于 2024-07-09 15:51:31 发布

weixin_30906185

最新推荐文章于 2024-07-09 15:51:31 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhx119/p/10594536.html

本文介绍Vue.js中如何使用provider和inject实现跨层级组件间的数据传递。这种方法允许子组件无论层级多深都能直接获取到顶层父组件提供的数据，提高了组件间的通信效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

child:

<template>
    <div>
      <p>{{message}}</p>

    </div>
</template>

<script>
     export default {
          name: "childThree",
       inject: ['for'],
       data(){
            return {
              message:this.for,
            }
       }
     }
</script>
parents:

<template>
    <div>
      <p>this is parent compoent!</p>
      <child-two></child-two>
    </div>
</template>

<script>
  import childTwo from '../components/childThree'
     export default {
          name: "parentTwo",
       provide:{
         for:'test'
       },
       components:{
            childTwo
       }
     }
</script>

<style scoped>

</style>