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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
jquery分割字符串的方法
Jun 24 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 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
PHP中的插件机制原理和实例
2014/07/08 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
jquery使用经验小结
2015/05/20 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
python中的常量和变量代码详解
2018/07/25 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Python3列表List入门知识附实例
2020/02/09 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
Python字典dict常用方法函数实例
2020/11/09 Python
Gap工厂店:Gap Factory
2017/11/02 全球购物
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
保护环境倡议书范文
2014/05/13 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
保外就医申请书范文
2015/08/06 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技