VUE3祖孙组件传值调用方法

父子组件传参可以通过 props 和 emit 来实现，但是当组件的层次结构比较深时，props 和 emit 就太繁琐了。vue为了解决这个提出了 provide / Inject

下面利用代码演示如何使用

祖父组件：

<template><div><!--父组件--><FatherDiv></FatherDiv></div>
</template>
<script setup>
import {ref, reactive,provide} from "vue";
import FatherDiv from './fatherDiv.vue'
const grandFatherData1 = ref('我是祖父组件数据');
const grandFatherFun1 = ()=>{console.log("我是祖父组件方法")
}provide('grandFatherData1',grandFatherData1.value ); //将数据和方法导出provide('grandFatherFun1',grandFatherFun1 );
</script>

父组件 fatherDiv.vue：

<template><div><!--子组件--><Grandson></Grandson></div>
</template>
<script setup>
import {ref, reactive,provide} from "vue";
import Grandson from './grandson.vue'</script>

孙子组件 grandson.vue：

<template><div><button @click="getGrandFatherData()">获取祖父组件数据</button></div>
</template>
<script setup>
import {ref, reactive,inject} from "vue";
const fun1 = inject('grandFatherFun1') // 接受
const data1 = inject('grandFatherData1');const getGrandFatherData = ()=>{fun1(); //调用方法console.log(data1); //调用数据
}
</script>

VUE3祖孙组件传值调用方法相关推荐

Vue3 子组件向父组件传值的方法
Vue3 子组件向父组件传值的方法有两种方式可以实现. 方式一:父组件传送一个处理方法给子组件,子组件调用这个处理方法把父组件关心的值作为参数传给这个处理方法. 例子: ============== ...
vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...
Vue组件之间传值/调用方法的几种方式
组件之间传值/调用方法的几种方式 (一)父组件向子组件传值==props 1.在父组件中使用子组件的地方绑定数据 <children :message="message"&g ...
react 子传参父_React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...
Vue3父子组件传值
Vue3父子组件传值父传子: 在父组件中给子组件自定义属性=要穿的值,子组件通过,props接受,然后在setup(props,emit)第一个参数中拿到props实例,props.传过来的自定义属 ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
vue3.0 组件传值
vue3.0组件传值子组件代码如下(示例): <template><p @click="handle">{{ test }}</p> < ...
uniapp组件传值的方法(父传子，子传父，对象传值)案例
文章目录前言父组件给子组件传值子组件给父组件传值父组件给父组件传对象值前言最近看到uniapp组件传值的方法,这里记录一下,学过vue的应该都觉得很简单,传值的方法基本与vue的写法差不多 ...
vue兄弟组件传值的方法
vue兄弟组件传值的方法主要通过event事件来传值: 传值的组件使用$emit发送事件接受值的组件通过$on绑定事件接受第一步创建js文件 test.js import Vue from ' ...

VUE3祖孙组件传值调用方法

VUE3祖孙组件传值调用方法

VUE3祖孙组件传值调用方法相关推荐

最新文章

热门文章