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

<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>

出来的效果是这样的：

示例效果二

2.通过$ref 实现通信

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

看不懂对吧？很正常，我也看不懂。那应该怎么理解？看看我的解释：

如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。

如果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我们获取了什么：