vue3 provide和inject传值父子,父孙,儿子和孙子之间相互传值以及修改,相互响应式的修改数据

本文介绍了如何在Vue3中使用provide和inject进行跨级通信,实现从父组件到孙组件的数据传递,并保持响应式。详细讲解了祖传孙的传值方式,设置默认值以及传递方法让孙组件能够修改爷爷组件的数据,从而达到双向数据同步。
摘要由CSDN通过智能技术生成

1 祖传孙

父组件 这里的car 不能写car.value,不然就不是响应式的

<script setup>
import { ref, provide } from 'vue'
import appCHILD1 from './appChild1.vue'
let car = ref('法拉利跑车')
provide('setCar', car)
</script>

<template>
  <h1>父孙组件之间传值</h1>
  <h1>父亲和儿子,父亲和孙子,儿子和孙子之间相互传值</h1>
  <h1>相互之间修改值,实时生效,动态绑定的</h1>
  <h2>爷爷的车:{
  { car }}</h2>
  <appCHILD1></appCHILD1>
</template>
<style scoped></style>

子组件

<script setup>
import appChild2 from './appChild2.vue'
import { inject } from 'vue'
let car = inject('setCar')

const click = () => {
  car.val
Vue2和Vue3中,父子组件之间传值的方式有一些区别。 在Vue2中,父组件可以通过props属性将数据传递给子组件,子组件通过props选项来接收父组件传递过来的。父组件可以在模板中使用v-bind指令来传递数据,子组件可以通过props选项来定义接收的属性。 示例代码如下: 父组件: ``` <template> <div> <child-component :message="message"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { message: 'Hello from parent component' }; }, components: { ChildComponent } }; </script> ``` 子组件: ``` <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'] }; </script> ``` 在Vue3中,引入了Composition API,可以使用ref和reactive等函数来创建响应式数据,并使用provideinject函数来进行父子组件之间传值。 示例代码如下: 父组件: ``` <template> <div> <child-component></child-component> </div> </template> <script> import { provide, ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default { setup() { const message = ref('Hello from parent component'); provide('message', message); return { message }; }, components: { ChildComponent } }; </script> ``` 子组件: ``` <template> <div> <p>{{ message }}</p> </div> </template> <script> import { inject } from 'vue'; export default { setup() { const message = inject('message'); return { message }; } }; </script> ``` 所以,Vue3中使用Composition API提供了更灵活的方式来实现父子组件之间传值
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小云儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值