一、概述
$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。