vue3探索——使用ref与$parent实现父子组件间通信

在vue3中,可以使用vue3的API defineExpose()函数结合ref或者$parent,实现父子组件数据的传递。

子组件向父组件传递数据defineExpose()ref

  • 子组件:通过defineExpose() 函数,向外暴露响应式数据或者方法
javascript 复制代码
// src/components/son.vue
<template>
    <div>
        <h1>儿子有 ${{ son_money }}</h1>
    </div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
 
// 1-定义子组件内部的响应式数据
const son_money = ref(500);
 
// 2-定义子组件内部的方法
function queryMoney() {
    alert('儿子还有 $' + son_money.value);
}
 
// 3-重点:把子组件中的数据或者方法暴露出去
defineExpose({
    son_money,
    queryMoney
});
</script>
  • 父组件:通过ref获取子组件实例,进而获取子组件暴露的响应式数据或方法
javascript 复制代码
// src/App.vue
<template>
    <div>
        <h1>父组件</h1>
        <button @click="querySon">看看儿子有多少钱</button>
        <button @click="giveSon">给儿子打50块钱</button>
        <hr>
        <!-- 2-使用子组件 -->
        <Son ref="son" />
    </div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
// 1-引入子组件
import Son from './components/son.vue';
 
// 3-获取子组件的实例
const son = ref();
 
function querySon() {
	// 4-重点:调用子组件暴露的 queryMoney()方法
    son.value.queryMoney();
}
 
function giveSon() {
	// 5-重点:查改子组件暴露的数据 son_money
    son.value.son_money += 50;
}
</script>

你没看错!这里的ref就是经常用来定义响应式数据的那个ref ,所以在script 标签中使用,需要带上.value

ref 的两个作用:

  • 定义响应式数据
  • 获取子组件实例

父组件向子组件传递数据defineExpose()$parent

  • 父组件:通过defineExpose() 函数,向外暴露响应式数据或者方法
javascript 复制代码
// src/App.vue
<template>
    <div>
        <h1>父组件有 ${{ money }}</h1>
        <hr>
        <!-- 2-使用子组件 -->
        <Daughter />
    </div>
</template> 
 
<script setup lang="ts">
import { ref } from 'vue';
 
// 1-引入子组件
import Daughter from './components/daughter.vue';
 
// 3-定义父组件响应式数据
const money = ref(1000);
 
// 4-定义父组件里的方法
function borrowMoney() {
    money.value -= 100;
    return 100;
}
 
// 5-重点:暴露父组件的数据和方法
defineExpose({
    money,
    borrowMoney
});
</script>
  • 子组件:通过监听事件和$parent ,获取父组件向外暴露的响应式数据或者方法
javascript 复制代码
<template>
    <div>
        <h1>我是子组件,我有 ${{ dau_money }}</h1>
        <!-- 1-重点:通过事件接收 $parent -->
        <button @click="borrow($parent)">向父组件借100块</button>
    </div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
 
// 定义子组件响应式数据
const dau_money = ref(0);
 
// 2-重点:通过$parent,拿到父组件暴露的数据与方法
function borrow($parent: any) {
	// $parent 里就有父组件暴露的 money属性 和 borrowMoney()方法
    // console.log($parent); 
 
    // 3-重点:调用父组件暴露的 borrowMoney()方法
    dau_money.value += $parent.borrowMoney();
    // 4-重点:可以查改父组件暴露的数据 money
    console.log('父组件还有 $' + $parent.money);
}
</script>

参考其他通讯方式:

[vue3探索------使用ref与parent实现父子组件间通信 - 前端cry - 博客园](https://www.cnblogs.com/cry0-0/p/17680928.html "vue3探索——使用ref与parent实现父子组件间通信 - 前端cry - 博客园")

相关推荐
互联网-小阿宇13 分钟前
【HTML+CSS+JS+VUE】web前端教程-1-VScode开发者工具快捷键
前端·javascript·html
鲤鱼池29 分钟前
JavaScript:内存与内存泄露
javascript
顾尘眠29 分钟前
element(vue2)表格插槽
javascript·vue.js·elementui
暗暗那34 分钟前
Vue演练场基础知识(六)Props传参+Emits事件
前端·javascript·vue.js
前端青山41 分钟前
使用XMLHttpRequest进行AJAX请求的详解
前端·javascript·ajax·okhttp·前端框架
疯狂的沙粒1 小时前
为什么页面无法正确显示?都有哪些HTML和CSS相关问题?
开发语言·前端·css·html
i_am_a_div_日积月累_1 小时前
vue3随笔记录
开发语言·javascript·ecmascript
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp (8)个人资料修改 消息页优化
java·vue.js·spring boot·uni-app
Tech Synapse1 小时前
Java验证邮箱是否有用的实现与解析
java·前端
time_silence1 小时前
CSS:背景样式、盒子模型与文本样式
前端·css