組件是 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屬性中註冊,然後子組件就可以用標籤的形式嵌進父組件了。
props
1.通過prop實現通信
子組件的props選項只能夠接收來自父組件數據。沒錯,僅僅只能接收,props是單向綁定的,即只能父組件向子組件傳遞,不能反向。而傳遞的方式也分爲兩種:
(1)靜態傳遞
子組件通過props選項來聲明一個自定義的屬性,然後父組件就可以在嵌套標籤的時候,通過這個屬性往子組件傳遞數據了。
<<父組件>>
<template>
<div>
<h1>我是父組件!</h1>
<child message="我是子組件一!"></child> //通過自定義屬性傳遞數據
</div>
</template>
<script>
import Child from '../components/child.vue' // 引入child子組件的頁面
export default {
components: {Child},// 註冊一個名爲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 :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>
通過$ref 實現通信
ref 是被用來給元素或子組件註冊引用信息的。引用信息將會註冊在父組件的 $refs
對象上。
如果ref用在子組件上,指向的是組件實例,可以理解爲對子組件的索引,通過$ref
可能獲取到在子組件裏定義的屬性和方法。
如果ref在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,通過$ref可能獲取到該DOM 的屬性集合,輕鬆訪問到DOM元素,作用與JQ選擇器類似。
<-- 父組件 -->
<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我們獲取了什麼。
這裏再補充一點就是,prop和$ref之間的區別:
prop 着重於數據的傳遞,它並不能調用子組件裏的屬性和方法。像創建文章組件時,自定義標題和內容這樣的使用場景,最適合使用prop。
$ref 着重於索引,主要用來調用子組件裏的屬性和方法,其實並不擅長數據傳遞。而且ref用在dom元素的時候,能使到選擇器的作用,這個功能比作爲索引更常有用到。
通過$emit 實現通信
<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>