vue3 基础-父子组件间如何通过事件通信
前几篇讨论的父子组件间如何进行传数据的话题. 即父组件在调用子组件的时候, 通过自定义属性 (v-bind) 的方式传递数据, 同时子组件通过 props 属性进行接收. 子组件可以对数据进行各种校验, 但不能修改, 即所谓的 "单项数据流''的概念, 这样其实是合理的, 不能混乱. 若是在要改就另存一份副本再进行操作即可.
本篇的学习是父子组件如何通过事件进行通信, 即子组件想要搞一个操作, 向父组件进行请示 (emit), 父组件同意后帮其在父组件的 methods 中进行回应.
子组件向父组件通信
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件事件通信 $emit</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () { return { count: 1 }},
methods: {
handleAddOne () {
this.count += 1
}
},
// 3. 父组件接收到信息并进行全局处理
template: `
<div>
<Son :count=count @add-one="handleAddOne" />
</div>
`
})
app.component('Son', {
props: ['count'],
methods: {
handleClick () {
// 1. 当用户点击, 触发 handleClick 事件
// 2. 然后其向父组件发射(请示) emit 一个名为 addOne 的事件
this.$emit('addOne')
}
},
template: '<div @click="handleClick">{{count}}</div>'
})
const vm = app.mount('#root')
</script>
</body>
</html>
以上例, 梳理组件事件传递的基础逻辑:
- 在子组件中, 当用户点击, 触发 handleClick 事件
- 然后其向父组件发射(请示) $emit 一个名为 addOne 的事件
- 父组件在调用子组件的地方接收 add-one 事件 (注意子emit用驼峰, 父接收用短横) 能默认识别
- 父组件在自己的 methods 中进行全局处理哦
补充一下这里的 $emit 是可以进行校验和传参的, 就校验举个栗子:
// 子组件首层
emit: {
add: (count) => {
if (count < 0) {
return true;
}
return false;
}
传参也演示一下:
const app = Vue.createApp({
data () { return { count: 1 }},
methods: {
handleAdd (arg1, arg2) {
this.count += 1
}
},
// 3. 父组件接收到信息并进行全局处理
template: `
<div>
<Son :count=count @add="handleAdd" />
</div>
`
}
app.component('Son', {
props: ['count'],
methods: {
handleClick () {
this.$emit('add', 1, 2)
}
},
template: '<div @click="handleClick">{{count}}</div>'
})
const vm = app.mount('#root')
modelValue 关键字
这种父组件向子组件传值, 子组件向父组件 emit 事件的过程, 岂不和 v-model 这个指令有异曲同工之妙嘛. 因此在约定俗成下, 我们能用 modelValue 这个关键字进行改写:
<!DOCTYPE html>
<html lang="en">
<head>
<title>modelValue</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () { return { count: 1 } },
// 1. 父组件通过 v-model 来监听 count 的变化
template: `<Son v-model=count />`
})
app.component('Son', {
props: ['modelValue'],
methods: {
handleClick () {
// 监控数据变化
this.$emit('update:modelValue', this.modelValue + 3)
}
},
template: '<div @click="handleClick">{{modelValue}}</div>'
})
const vm = app.mount('#root')
</script>
</body>
</html>
当然也是可以改名字的, 通过 v-model:xxx 的写法:
<script>
const app = Vue.createApp({
data () { return { count: 1 } },
// 1. 父组件通过 v-model 来监听 count 的变化
template: `<Son v-model:cj=count />`
})
app.component('Son', {
props: ['cj'],
methods: {
handleClick () {
this.$emit('update:cj', this.cj + 3)
}
},
template: '<div @click="handleClick">{{cj}}</div>'
})
const vm = app.mount('#root')
</script>
小结
最后再来对整个子组件向父组件 emit 事件的操作流程做一个小结
- 在子组件中, 触发一个名为 nb 的时间
- 然后其向父组件发射(请示) $emit 一个名为 nb 的事件
- 父组件在调用子组件的地方接收 nb 事件
- 父组件在自己的 methods 中进行全局处理哦
- 可以用 v-model 的写法来进行简写这种父子通信的代码
vue3 基础-父子组件间如何通过事件通信的更多相关文章
- Vue2.0父子组件间事件派发机制
从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...
- vue之父子组件间通信实例讲解(props、$ref、$emit)
组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...
- 第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- vue组件定义方式，vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue:父子组件间通信，父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue-cli中父子组件间的变量传递
vue-cli中父子组件间的变量传递 在vue中每一个组件的作用域都是独立的,如果我们想实现父子组件间变量的传递就要另寻他法,而不能直接调用其中的变量. 父级组件向子级组件传递变量 要实现这种效果我们 ...
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法 父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...
- React中父子组件间的通信问题
1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)
- 【Vue】组件的基础与组件间通信
转载:https://segmentfault.com/a/1190000016409329 Vue.js 最核心的功能就是组件(Component),从组件的构建.注册到组件间通信,Vue .x 提 ...
随机推荐
- WPF DockLayoutManager布局后的布局重置
初始化布局 Logging.InfoBiz("初始化布局信息"); dockLayoutManager = new DockLayoutManager(); RestoreLayo ...
- 丢掉WebView,使用JS+Rust开发跨端桌面应用-Deft
简介 随着Web技术的发展,越来越多的跨端应用选择了WebView作为基础解决方案.诚然WebView让跨端应用开发变得简单了很多,极大的提高了开发效率,但是,WebView也存在着一些广为诟病的缺点 ...
- Ansible - [10] Vault（加密&解密）
加密文件 Ansible 有时需要访问一些敏感数据,如密码.Key等 使用ansible-vault可以加密和解密数据 # 创建测试文件 [root@control ansible]# echo 12 ...
- Ansible - [03] Ansible ad-hoc模式
Ansible ad-hoc是一种通过命令行批量管理的方式 格式:ansible 主机集合 -m 模块名 -a "参数" 其他参数: -k 使用密码远程.-i 指定主机列表文件 以 ...
- 批处理脚本(.bat)实现实时监测文件夹并执行命令 [假设有新文件则拷贝到远程文件夹内]
想到一个情景.程序实时监测文件夹情况,如果有新文件进入,分析其文件名,然后如果满足预设条件,则做相应操作.比如扫描仪扫描了文件,会将新文件保存进特定文件夹内,可以使用该程序来做处理. 在Windows ...
- 补充：基于项目的协同过滤推荐算法(Item-Based Collaborative Filtering Recommendation Algorithms)
前言 继续上篇博客,继续读论文. 想看上篇论文的同学可以点击这里 相关工作 In this section we briefly present some of the research litera ...
- 如何解决ubuntu安装第三方deb出现的read unknown VMA问题（SUID sandbox配置问题）
前言 众所不周知,ubuntu的snap有些让人无语凝噎的问题,比方说如果你在Ubuntu 24.04 LTS通过它安装vscode,恭喜你,你无法在vscode中输入中文,缘由不明,又或者对于str ...
- ohpm : 无法将“ohpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
ohpm : 无法将"ohpm"项识别为 cmdlet.函数.脚本文件或可运行程序的名称. 造成该问题有两个: 没有配置好 ohpm 的环境变量. 没有配置好 PowerShell ...
- python 读写csv文件（创建，追加，覆盖）
读取csv文件 利用 csv.reader 可以读 csv 文件,然后返回一个可迭代的对象 csv_read,我们可以直接从 csv_read 中取数据 import csv def read_csv ...
- Git工作流介绍
前言 工作流其实不是一个初级主题,背后的本质问题其实是有效的项目流程管理和高效的开发协同约定,不仅是Git或SVN等SCM工具的使用. 集中式工作流 如果你的开发团队成员已经很熟悉Subversion ...