vue知识点总结 --- provide inject

Vue跨组件通讯之provide与inject

最新推荐文章于 2025-08-16 15:15:14 发布

原创最新推荐文章于 2025-08-16 15:15:14 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

vue 专栏收录该内容

7 篇文章

订阅专栏

博客介绍了Vue跨组件的通讯方式，可在父组件定义provide，子组件使用inject逐级在上层寻找数据，找到即停止，类似事件冒泡机制，还提及后续将按需提供响应式数据。

跨组件的通讯方式。可在父组件定义provide，子子子子子组件使用inject逐级在上层寻找，找到相应的数据就不再往上层找，有点类似与事件的冒泡机制

// 父组件 About
<template>
  <div class="about">
    <button @click="changeMsg({content})">change msg</button>
    <ChildA></ChildA>
  </div>
</template>

<script>
import ChildA from '@/components/ChildA.vue'

export default {
  name: 'home',
  components: {
    ChildA
  },
  data () {
    return {
      msg: 'im from About',
      content: ''
    }
  },
  provide () {
    return {
      content: {
        msg: this.msg
      }
    }
  },
  methods: {
    changeMsg (msg) {
      if (msg) {
        this.msg = 'im new msg from About'
      }
    }
  }
}
</script>

// 子组件
<template>
  <div class="ChildA">
    <p>{{content.msg}}</p>
  </div>
</template>

<script>

export default {
  name: 'childA',
  data () {
    return {
    }
  },
  // inject: ['content'],
  inject: {
    content: {
      default: () => {}
    }
    // 重新命名
    // content1: {
    //   from: 'content',
    //   default: () => {}
    // }
  }
}
</script>

// 此时点击父组件的按钮，ChildA组件并不会同步更新msg，因为传递的content.msg是一个字符串，不是响应式的，msg改变的时候，数据不会实时相应到provide里面的content。如果想改变这个情况，就要提供一个响应式的provide：
// 改变父节点provide 
export default {
  provide () {
    return {
      content: this
    }
  }
}

待更新按需提供响应式数据