vue之父子组件间通信实例讲解(props、$ref、$emit)


Posted in Javascript onMay 22, 2018

组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信,也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信。

在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础。

//父组件

<template>
 <div>
 <h1>我是父组件!</h1>
 <child></child>
 </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>
//子组件

<template>
 <h3>我是子组件!</h3>
</template>

<script>
</script>

这两部分的代码都很清晰明了,父组件通过import的方式导入子组件,并在components属性中注册,然后子组件就可以用标签<child>的形式嵌进父组件了。运行father.vue后的效果是这样的:

vue之父子组件间通信实例讲解(props、$ref、$emit)

示例效果一

1.通过prop实现通信

子组件的props选项能够接收来自父组件数据。没错,仅仅只能接收,props是单向绑定的,即只能父组件向子组件传递,不能反向。而传递的方式也分为两种:

(1)静态传递

子组件通过props选项来声明一个自定义的属性,然后父组件就可以在嵌套标签的时候,通过这个属性往子组件传递数据了。

<!-- 父组件 -->

<template>
 <div>
 <h1>我是父组件!</h1>
 <child message="我是子组件一!"></child> //通过自定义属性传递数据
 </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>
<!-- 子组件 -->

<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
 props: ['message'] //声明一个自定义的属性
 }
</script>

(2)动态传递

我们已经知道了可以像上面那样给 props 传入一个静态的值,但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过v-bind绑定props的自定义的属性,传递去过的就不是静态的字符串了,它可以是一个表达式、布尔值、对象等等任何类型的值。

<!-- 父组件 -->

<template>
 <div>
 <h1>我是父组件!</h1>
 <child message="我是子组件一!"></child>

 <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
 <child v-bind:message="a+b"></child>

 <!-- 用一个变量进行动态赋值。-->
 <child v-bind:message="msg"></child>
 </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
 data() {
 return {
  a:'我是子组件二!',
  b:112233,
  msg: '我是子组件三!'+ Math.random()
 }
 }
}
</script>
<!-- 子组件 -->

<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
 props: ['message']
 }
</script>

出来的效果是这样的:

vue之父子组件间通信实例讲解(props、$ref、$emit)

示例效果二

2.通过$ref 实现通信

对于ref官方的解释是:ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。

看不懂对吧?很正常,我也看不懂。那应该怎么理解?看看我的解释:

  1. 如果ref用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过$ref可能获取到在子组件里定义的属性和方法。
  2. 如果ref在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,通过$ref可能获取到该DOM 的属性集合,轻松访问到DOM元素,作用与JQ选择器类似。

那如何通过$ref 实现通信?下面我将上面prop实现的功能,用$ref实现一遍:

 

<!-- 父组件 -->

<template>
 <div>
 <h1>我是父组件!</h1>
 <child ref="msg"></child>
 </div>
</template>

<script>
 import Child from '../components/child.vue'
 export default {
 components: {Child},
 mounted: function () {
  console.log( this.$refs.msg);
  this.$refs.msg.getMessage('我是子组件一!')
 }
 }
</script>
<!-- 子组件 -->

<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
 data(){
  return{
  message:''
  }
 },
 methods:{
  getMessage(m){
  this.message=m;
  }
 }
 }
</script>

从上面的代码我们可以发现,通过ref=‘msg'可以将子组件child的实例指给$ref,并且通过.msg.getMessage()调用到子组件的getMessage方法,将参数传递给子组件。下面是“ console.log( this.$refs.msg);”打印出来的内容,这可以让大家更加了解,究竟通过ref我们获取了什么:

vue之父子组件间通信实例讲解(props、$ref、$emit)

console.log

最后的效果是这样的:

vue之父子组件间通信实例讲解(props、$ref、$emit)

示例效果三

这里再补充一点就是,prop和$ref之间的区别:

  1. prop 着重于数据的传递,它并不能调用子组件里的属性和方法。像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop。
  2. $ref 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且ref用在dom元素的时候,能使到选择器的作用,这个功能比作为索引更常有用到。

3.通过$emit 实现通信

上面两种示例主要都是父组件向子组件通信,而通过$emit 实现子组件向父组件通信。

对于$emit官网上也是解释得很朦胧,我按我自己的理解是这样的:

vm.$emit( event, arg )

$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。

<template>
 <div>
 <h1>{{title}}</h1>
 <child @getMessage="showMsg"></child>
 </div>
</template>

<script>
 import Child from '../components/child.vue'
 export default {
 components: {Child},
 data(){
  return{
  title:''
  }
 },
 methods:{
  showMsg(title){
  this.title=title;
  }
 }
 }
</script>
<template>
 <h3>我是子组件!</h3>
</template>
<script>
 export default {
 mounted: function () {
  this.$emit('getMessage', '我是父组件!')
 }
 }
</script>

vue之父子组件间通信实例讲解(props、$ref、$emit)

示例效果三

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
JS location几个方法小姐
Jul 09 Javascript
javascript 闭包疑问
Dec 30 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
element跨分页操作选择详解
Jun 29 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 #Javascript
Vue页面骨架屏的实现方法
May 22 #Javascript
Angular网络请求的封装方法
May 22 #Javascript
vue input输入框模糊查询的示例代码
May 22 #Javascript
vue 中swiper的使用教程
May 22 #Javascript
vue配置多页面的实现方法
May 22 #Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 #Javascript
You might like
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php 数组的指针操作实现代码
2011/02/08 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
Vue性能优化的方法
2020/07/30 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
Python 详解基本语法_函数_返回值
2017/01/22 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
python实现淘宝秒杀脚本
2020/06/23 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
python实现猜拳小游戏
2020/04/05 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
简述数据库的设计过程
2015/06/22 面试题
银行演讲稿范文
2014/01/03 职场文书
保送生自荐信范文
2015/03/26 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
Python标准库pathlib操作目录和文件
2021/11/20 Python
python自动化测试之Selenium详解
2022/03/13 Python