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 function代码
May 23 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
基于JavaScript实现瀑布流布局
Aug 15 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
浅谈如何优雅处理JavaScript异步错误
Nov 12 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
mac下安装nginx和php
2013/11/04 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
js单线程的本质 Event Loop解析
2019/10/29 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
python数据结构之链表详解
2017/09/12 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
给实习单位的感谢信
2014/02/01 职场文书
和解协议书
2014/04/16 职场文书
师德师风个人反思
2014/04/28 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
学生个人评语大全
2015/01/04 职场文书
专项资金申请报告
2015/05/15 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python