一、概述
$ref、$emit、props是Vue中常见的传参方式，可以实现组件与组件之间的数据传递和交互
二、$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方法，将参数传递给子组件。
三、$emit的使用方式
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。
父组件：
<!-- 父组件 -->
<template>
<div>
<h1>我是父组件！</h1>
<child message="我是子组件一！"></child>
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<child v-bind:message="a+b"></child>
<!-- 用一个变量进行动态赋值。-->
<child v-bind:message="msg"></child>
<other-child @getMessage="showMsg"></other-child>
<h1>{{content}}</h1>
</div>
</template>
<script>
import Child from '../components/child.vue'
import OtherChild from '../components/otherChild.vue'
export default {
components: { Child, OtherChild },
data () {
return {
a: '我是子组件二！',
b: 112233,
msg: '我是子组件三！' + Math.random(),
content: ''
}
},
methods: {
showMsg (title) {
this.content = title
}
}
}
</script>
子组件：
<template> <h3>我是子组件！</h3> </template> <script> export default { mounted: function () { this.$emit('getMessage', '我是子组件传给父组件的参数！') } } </script>
四、props的使用方式
子组件的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>
五、三者的使用场景和区别
1.$ref
$ref用于数据之间的传递，如果ref用在子组件上能通过$ref获取到子组件节点、事件、数据、属性，主要还是父组件向子组件通信
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。
2.$emit
$emit用于事件之间的传递， 可以实现子组件传参给父组件
$emit主要是可以在子组件中触发父组件里面的方法
3.props
props用于父组件向子组件传递数据信息，传参方式是单向传输，只能父组件传给子组件，不能实现子组件传参给父组件.
props 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。