vue3探索——使用ref与$parent实现父子组件间通信
在vue3中,可以使用vue3的API defineExpose()
函数结合ref
或者$parent
,实现父子组件数据的传递。
子组件向父组件传递数据defineExpose()
和ref
- 子组件:通过
defineExpose()
函数,向外暴露响应式数据或者方法
// 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
获取子组件实例,进而获取子组件暴露的响应式数据或方法
// 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()
函数,向外暴露响应式数据或者方法
// 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
,获取父组件向外暴露的响应式数据或者方法
<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实现父子组件间通信的更多相关文章
- vue之父子组件间通信实例讲解(props、$ref、$emit)
组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法 父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
- 【vue】父子组件间通信----传函数
(一)子组件 调用 父组件 方法 方式一) 子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child&g ...
- vue非父子组件间通信
有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...
- 【vue】父子组件间通信----传值
官方文档参考 (一)父组件 向 子组件 传值 ①在父组件中调用子组件处,绑定要传的数据data1, 如 <nav :data1=" " ></nav> ...
- vue2 父子组件间通信
父组件往子组件传值 props 传text father.vue <template> <div class="father"> {{'我是父组件'}} & ...
- Vue 父子组件间的通信
前言 在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法 父组件传值给子组件,这 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
随机推荐
- hutool,真香!
前言 今天给大家介绍一个能够帮助大家提升开发效率的开源工具包:hutool. Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,提高工作效率,使Java拥有函数式 ...
- config.baseUrl.dev 变量 转移到 .env.local 中
config.baseUrl.dev 变量 转移到 .env.local 中 上下文 vue前端开发 问题 多人写代码的时候,会提交config.js里面的配置文件 解决方案 在根目录创建 .env. ...
- 霞鹜文楷 字体推荐 - 'Fira Code', '霞鹜文楷等宽 Light',
霞鹜文楷 字体推荐 字体推荐 在vscode里面 'Fira Code', '霞鹜文楷等宽 Light', 仓库 https://github.com/lxgw/LxgwWenKai https:// ...
- Vue 动态插入组件 用js函数的方式
Vue 动态插入组件 用js函数的方式 第一步 import vue组件 第二步 Vue把组件扩展进去 第三步 创建实例 第四步 将组件的el挂载到document.body上 第五步 设置组件内部d ...
- 五大基础dp
动规条件 • 最优化原理:如果问题的最优解所包含的子问题的解也是最优的,就称该问题具有最优子结构, 即满足最优化原理. • 无后效性:即某阶段状态一旦确定,就不受这个状态以后决策的影响.也就是说,某状 ...
- B站Aimls的JavaFx教程目录合集
B站里有时候不太好去找资源,用JS爬了下,整出标题和链接,方便后续查询某个知识点的使用! JavaFX视频教程第1课,hello world JavaFX视频教程第2课,application的启动方 ...
- JavaFx 模拟键盘和鼠标事件
模拟键盘事件 可实现按键的模拟,包含快捷键 模拟按下ctrl+v示例代码: val robot = Robot() robot.keyPress(KeyEvent.VK_CONTROL) robot. ...
- mybatis之Mapped Statements collection does not contain value for...错误原因分析
错误原因有几种: 1.mapper.xml中没有加入namespace: 2.mapper.xml中的方法和接口mapper的方法不对应: 3.mapper.xml没有加入到mybatis-co ...
- MyBatis Java 和 Mysql数据库 数据类型对应表
类型处理器(typeHandlers) MyBatis 在设置预处理语句(PreparedStatement)中的参数或从结果集中取出一个值时, 都会用类型处理器将获取到的值以合适的方式转换成 Jav ...
- 在 Windows 上利用Qwen大模型搭建一个 ChatGPT 式的问答小助手
本文首发于公众号:Hunter后端 原文链接:在 Windows 上利用Qwen大模型搭建一个 ChatGPT 式的问答小助手 最近 ChatGPT 式的聊天机器人比较火,可以提供各种问答功能,阿里最 ...