vue3.0父传子，父传孙，子传孙，孙传父，孙传子的传值

1.父组件

<template><div class="Parent" ref="Parent"><el-button @click="Responsive">父组件执行方法</el-button><Subcomponents></Subcomponents></div>
</template><script lang="ts">
import { defineComponent, onMounted,reactive,provide,ref} from 'vue';
import Subcomponents from "@/components/Subcomponents.vue"
export default defineComponent({name: 'Parent',components:{Subcomponents},setup(props,ctx){//响应式数据const state = reactive({name:"小陈"})//调用此方法之后，会动态的改变其子孙组件的所有引用值const Responsive=()=>{state.name="小魔"}//子组件执行父组件的方法const ResponsiveSub=()=>{state.name="小锋"console.log("我是子组件访问了父节点")console.log(Parent.value)}//孙组件执行父组件的方法const ResponsiveSun=()=>{state.name="小夏"console.log("我是孙组件访问了父节点")console.log(Parent.value)}//父组件数据传递给孙子组件provide("ParentValue",state)//父组件数据的方法传递给孙子组件，然后孙子组件调用之后直接修改父组件的值provide("ResponsiveSub",ResponsiveSub)provide("ResponsiveSun",ResponsiveSun)onMounted(async () => {})return{state,Responsive,ResponsiveSub,ResponsiveSun,}},props: {},
});
</script>

2.子组件

<template><div class="Subcomponents"><p>{{ParentValue.name}}</p><el-button @click="ResponsiveSub">子组件执行父组件方法</el-button><Suncomponent></Suncomponent></div>
</template><script lang="ts">
import { defineComponent,onMounted,reactive,inject} from 'vue';
import Suncomponent from "@/components/Suncomponent.vue"
export default defineComponent({name: 'Subcomponents',components:{Suncomponent,},setup(props,context){const state = reactive({})const ParentValue = inject("ParentValue")const ResponsiveSub = inject("ResponsiveSub")onMounted(async () => {// props.Deom()})return{ParentValue,ResponsiveSub}},props: {},
});
</script>

3.孙组件

<template><div class="Suncomponent"><p>{{ParentValue.name}}</p><el-button @click="ResponsiveSun">孙组件执行父组件方法</el-button></div>
</template><script lang="ts">
import { defineComponent,onMounted,reactive,inject} from 'vue';export default defineComponent({name: 'Suncomponent',components:{},emits: {Error: val => {console.log(val);return true;}},setup(props){const state = reactive({})const ParentValue = inject("ParentValue")const ResponsiveSun = inject("ResponsiveSun")onMounted(async () => {})return{ParentValue,ResponsiveSun}},props: {},
});
</script>

总结：首先执行父组件的Responsive方法，会出现

然后执行子组件的ResponsiveSub方法，会出现

最后执行孙组件的ResponsiveSun方法，会出现

以上三个方法都是改变了父组件的name的值，并且都是实时响应，对应的子组件里面的值也发生了改变。
最主要的就是使用了vue的provide/inject的属性来实现的.

vue3.0父传子，父传孙，子传孙，孙传父，孙传子的传值相关推荐

vue3.0 组件使用引用传值父传子子传父
vue3.0 组件使用引用传值父传子子传父组件的创建组件引入在html中使用组件传值父传子子接收参数子传父父接收参数组件的创建 1.将所需功能封装在components目录下 ...
vue3.0 父组件调用子组件方法及获取子组件的值
vue3.0 父组件调用子组件方法及获取子组件的值通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异,但是思路还是一样 ...
vue3.0 透传 Attribute
目录效果一(子组件只有一个根节点,透传生效) 效果二(子组件有多个根节点,透传未生效,且控制台会抛出警告) 效果三(子节点如果不是单根节点的时候,可以通过添加:="$attrs" ...
el-select change事件传多个参数_第8天 | 14天搞定Vue3.0，事件处理(详细)
在JavaScript语言中,当用户与UI组件交互时,UI组件能够激发一个相应事件.例如,用户按动按钮.滚动文本.移动鼠标或按下按键等,都将产生一个相应的事件. Vue3.0使用v-on指令(缩写为@ ...
[html] 写出不定宽度的子级div，在相对于固定宽度的父级元素水平居中的布局
[html] 写出不定宽度的子级div,在相对于固定宽度的父级元素水平居中的布局 <div class="father"> <div class="so ...
vue $emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数...
前言很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了. 找到了两种方法可以同时添加自定义参数的方法. 方法一子组件传出单个参数时: ...
Retrofit 2.0 超能实践（三），轻松实现多文件/图片上传/Json字符串/表单
通过前两篇姿势的入门 Retrofit 2.0 超能实践,完美支持Https传输 Retrofit2.0 完美同步Cookie实现免登录本文出自:http://blog.csdn.net/sk719 ...
【Vue3.0】Vue3.0简介-指令-过滤器-案例D2.0
[Vue3.0]Vue3.0简介-指令-过滤器-案例一.Vue3.0简介 1.1.vue3.0与vue2.0对比 vue2.0中绝大多数的API与特性,在vue3.0中同样支持.但是vue3.0中新 ...
pb调用键盘钩子的例子_搞不动Vue3.0的源码，先做个API调用师也行（新人踩坑初试）...
作为一个刚刚入行工作不久的前端菜鸟,Vue2.x都没整熟练.但看着身边人都在学习Vue3,我也不敢怠慢,毕竟Vue3正式版已经发布两个月了,我还是耐着性子好好的阅读了一下Vue3.0的文档.没有其他大 ...

vue3.0父传子，父传孙，子传孙，孙传父，孙传子的传值

vue3.0父传子，父传孙，子传孙，孙传父，孙传子的传值相关推荐

最新文章

热门文章