vue父子组件通信的高级用法示例


Posted in Javascript onAugust 29, 2019

前言

vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。

子通信父

父组件

<template>
<div class="parent">
我是父组件
<!--父组件监听子组件触发的say方法,调用自己的parentSay方法-->
<!--通过:msg将父组件的数据传递给子组件-->
<children :msg="msg" @say="parentSay"></children>
</div>
</template>

<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
// 参数就是子组件传递出来的数据
parentSay(msg){
console.log(msg) // hello, parent
}
},

// 引入子组件
components:{
children: Children
}
}
</script>

子组件

<template>
<div class="hello">
<div class="children" @click="say">
我是子组件
<div>
父组件对我说:{{msg}}
</div>
</div>

</div>
</template>

<script>

export default {
//父组件通过props属性传递进来的数据
props: {
msg: {
type: String,
default: () => {
return ''
}
}
},
data () {
return {
childrenSay: 'hello, parent'
}
},

methods: {
// 子组件通过emit方法触发父组件中定义好的函数,从而将子组件中的数据传递给父组件
say(){
this.$emit('say' , this.childrenSay);
}
}
}
</script>

子组件使用$emit方法调用父组件的方法,达到子通信父的目的。

父通信子

父组件

<!--Html-->
<template>
<!--父组件触发click方法-->
<div class="parent" @click="say">
我是父组件
<!--通过ref标记子组件-->
<children ref="child"></children>
</div>
</template>

<script>
import Children from './children.vue'
export default {
data () {
return {
msg: "hello,my son"
}
},
methods: {
// 通过$refs调用子组件的parentSay方法
say(){
this.$refs.child.parentSay(this.msg);
}
},

// 引入子组件
components:{
children: Children
}
}
</script>

子组件

<template>
<div class="hello">
<div class="children" >
我是子组件
<div>
父组件对我说:{{msg}}
</div>
</div>

</div>
</template>

<script>

export default {
data () {
return {
msg: ''
}
},

methods: {
// 父组件调用的JavaScript方法parentSay
parentSay(msg){
this.msg = msg;
}
}
}
</script>

父组件通过 $refs 调用子组件的方法。

以上就是父子组件通信的方式,父子组件传递数据直接用props,或者使用 $emit 和 $refs 依靠事件来传递数据。

父子组件通信提升篇

上文中,子通信父是在 子中触发点击事件 然后调用父组件的方法,父通信子是在 父中触发点击事件 调用子组件的方法。但是实际情况中可能存在 子通信父时子组件不允许有点击事件 而事件在父中或者 父通信子时点击事件在子组件 中。

子通信父时击事件在父组件

这种情况其实很常见,例如提交一个表单时表单的内容为子组件,而保存按钮在父组件上。此时点击保存按钮想要获取子组件表单的值。这种情况下已经不单单是子通信父和父通信子了,需要将两者结合在一起使用才能完成整个通信过程。

实现的思路是在父组件中点击事件时,先通过父子通信调用子组件的方法,然后在子组件中的该方法里使用子父通信调用父组件的另一个方法并将信息传递回来。以下是代码演示:

父组件

<template>
<div class="parent" @click="getData">
我是父组件
<!--父组件监听子组件触发的transData方法,调用自己的transData方法-->
<!--通过ref标记子组件-->
<children ref="child" @transData="transData"></children>
</div>
</template>

<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
getData(){
// 调用子组件的getData方法
this.$refs.child.getData();
},
// 参数就是子组件传递出来的数据
transData(msg){
console.log(msg) // hello, parent
}
},

// 引入子组件
components:{
children: Children
}
}
</script>

子组件

<template>
<div class="hello">
<div class="children" >
我是子组件
<div>
子组件的数据:{{childrenSay}}
</div>
</div>

</div>
</template>

<script>

export default {
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
// 子组件通过emit方法触发父组件中定义好的函数,从而将子组件中的数据传递给父组件
getData() {
this.$emit('transData' , this.childrenSay);
}
}
}
</script>

另一种情况思路也和这个一样,基础就在与父通信子和子通信父的灵活运用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
js创建对象的方法汇总
Jan 07 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 #Javascript
JS中async/await实现异步调用的方法
Aug 28 #Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 #Javascript
详解用async/await来处理异步
Aug 28 #Javascript
vue中监听返回键问题
Aug 28 #Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 #Javascript
小程序中this.setData的使用和注意事项
Aug 28 #Javascript
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
jquery选择器需要注意的问题
2014/11/26 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python函数的周期性执行实现方法
2016/08/13 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
工程造价专业大专生求职信
2013/10/06 职场文书
租房协议书怎么写
2014/04/10 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
导游词之凤凰古城
2019/10/22 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP