vue3版本provide、inject用法

丸子丸子丸子酱

于 2021-11-03 15:17:07 发布

阅读量534

点赞数

分类专栏： javascript typesrcipt 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_28008615/article/details/121116631

版权

javascript 同时被 2 个专栏收录

23 篇文章

订阅专栏

typesrcipt

3 篇文章

订阅专栏

本文介绍Vue.js中通过provide和inject实现祖与后代组件间的数据传递技巧。父组件利用provide选项提供数据，后代组件则通过inject选项接收并使用这些数据。文中展示了具体的代码示例，帮助理解这一高效的数据流管理方式。

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

provide、inject

作用：实现祖与后代组件间通信
套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据
祖组件中：

<template>
<div class="app">
  <h3>我是app组件,{{name}}--{{price}}</h3>
  
  <Child />
</div>

  
</template>

<script>
import Child from './components/Child.vue'
import {reactive,toRefs,provide} from 'vue'
export default {
  name: 'App',
  components: {
    Child
  },
  setup(props) {
    let car=reactive({
      name:'奔驰',
      price:'40w'
    })
     
    provide('car',car)//两个参数，给自己后代组件传递数据
    return {...toRefs(car)}
  }
}
</script>
<style scoped>
.app{
  background: gray;
  padding: 10px;
}
</style>

后代组件中：

<template>
<div class="son">
  <h3>我是son组件(孙))</h3>
  {{car.name}}
----{{car.price}}
<!-- {{car.name}} -->
</div>

  
</template>

<script>
import {inject} from 'vue'

export default {
  name: 'Son',
  components: {

  },
      setup(props) {
      let car= inject('car')
      console.log(car)
      return {car}
    }
}
</script>
<style scoped>
.son{
  background: orangered;
  padding: 10px;
}
</style>