17-依赖注入provide/inject

sunnyboysix

已于 2022-09-05 17:29:51 修改

阅读量161

点赞数

分类专栏： vue3官网学习文章标签： vue3

于 2022-09-05 17:28:40 首次发布

本文链接： https://blog.csdn.net/sunnyboysix/article/details/126709674

版权

vue3官网学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue中根组件向子组件传递数据的方法，包括使用`provide`和`inject`进行跨级通信，以及如何确保传递的值是响应式的。通过示例展示了在A组件和B组件中如何注入并修改父组件提供的数据，强调了`ref`和`reactive`在响应式传递中的应用。

摘要由CSDN通过智能技术生成

<template>
  <div class="App">
      <h1>我是根组件</h1>
      <A></A>
  </div>
</template>

<script setup lang="ts">
import A from '../components/Mix/A.vue'
import { provide, ref, reactive } from 'vue'

//provide  是一个函数(key, value)
provide('flag', false) //这个不是响应式的

provide('test', ref(false))  //可以使用ref  reactive

</script>

<style lang="less" scoped>
.App {
  width: 300px;
  height: 300px;
  background: red;
  color: #fff;
}

</style>



<template>
  <div class="A">
      <h1>我是A组件</h1>
      {{ data }} {{ data1 }}
      <B></B>
  </div>
</template>

<script setup lang="ts">
import B from './B.vue'
import { inject } from 'vue';

let data = inject('flag')
let data1 = inject('test')
</script>

<style lang="less" scoped>
.A {
  width: 250px;
  height: 250px;
  background: blue;
  color: #fff;
}

</style>




<template>
  <div class="B">
      <h1>我是B组件</h1>
      {{ data }}
      <div @click="changeTest">change test</div>
      {{ data1 }}
  </div>
</template>

<script setup lang="ts">
import { inject, Ref, ref } from 'vue';

let data = inject('flag')
let data1 = inject<Ref<boolean>>('test', ref(false))
const changeTest = () => {
  data1.value = !data1.value  //响应式会改变所有引用处的值
}
</script>

<style lang="less" scoped>
.B {
  width: 200px;
  height: 200px;
  background: green;
  color: #fff;
}

</style>