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 相关文章推荐
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
js实现拖拽与碰撞检测
Sep 18 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
Python如何将模块打包并发布
2020/08/30 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
《争吵》教学反思
2014/02/15 职场文书
环境建设实施方案
2014/03/14 职场文书
采购求职信
2014/03/17 职场文书
考察现实表现材料
2014/05/19 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
小学远程教育工作总结
2015/08/13 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
对象析构函数__del__在Python中何时使用
2022/03/22 Python