組件是 vue.js 最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味着不同組件之間的數據無法相互引用。那么組件間如何通信，也就成為了vue中重點知識了。這篇文章將會通過props、$ref和 $emit 這幾個知識點，來講解如何實現父子組件間通信。
在說如何實現通信之前，我們先來建兩個組件father.vue和child.vue作為示例的基礎。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//父組件
<template>
<div>
<h1>我是父組件！</h1>
<child></child>
</div>
</template>
<script>
import Child from
'../components/child.vue'
export
default
{
components: {Child},
}
</script>
|
|
1
2
3
4
5
6
7
8
|
//子組件
<template>
<h3>我是子組件！</h3>
</template>
<script>
</script>
|
這兩部分的代碼都很清晰明了，父組件通過import的方式導入子組件，並在components屬性中注冊，然后子組件就可以用標簽<child>的形式嵌進父組件了。運行father.vue后的效果是這樣的：
示例效果一
1.通過prop實現通信
子組件的props選項能夠接收來自父組件數據。沒錯，僅僅只能接收，props是單向綁定的，即只能父組件向子組件傳遞，不能反向。而傳遞的方式也分為兩種：
（1）靜態傳遞
子組件通過props選項來聲明一個自定義的屬性，然后父組件就可以在嵌套標簽的時候，通過這個屬性往子組件傳遞數據了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!-- 父組件 -->
<template>
<div>
<h1>我是父組件！</h1>
<child message=
"我是子組件一！"
></child>
//通過自定義屬性傳遞數據
</div>
</template>
<script>
import Child from
'../components/child.vue'
export
default
{
components: {Child},
}
</script>
|
|
1
2
3
4
5
6
7
8
9
10
|
<!-- 子組件 -->
<template>
<h3>{{message}}</h3>
</template>
<script>
export
default
{
props: [
'message'
]
//聲明一個自定義的屬性
}
</script>
|
（2）動態傳遞
我們已經知道了可以像上面那樣給 props 傳入一個靜態的值，但是我們更多的情況需要動態的數據。這時候就可以用 v-bind 來實現。通過v-bind綁定props的自定義的屬性，傳遞去過的就不是靜態的字符串了，它可以是一個表達式、布爾值、對象等等任何類型的值。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!-- 父組件 -->
<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>
|
|
1
2
3
4
5
6
7
8
9
10
|
<!-- 子組件 -->
<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實現一遍：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!-- 父組件 -->
<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>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!-- 子組件 -->
<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我們獲取了什么：
console.log
最后的效果是這樣的：
示例效果三
這里再補充一點就是，prop和$ref之間的區別：
- prop 着重於數據的傳遞，它並不能調用子組件里的屬性和方法。像創建文章組件時，自定義標題和內容這樣的使用場景，最適合使用prop。
- $ref 着重於索引，主要用來調用子組件里的屬性和方法，其實並不擅長數據傳遞。而且ref用在dom元素的時候，能使到選擇器的作用，這個功能比作為索引更常有用到。
3.通過$emit 實現通信
上面兩種示例主要都是父組件向子組件通信，而通過$emit 實現子組件向父組件通信。
對於$emit官網上也是解釋得很朦朧，我按我自己的理解是這樣的:
|
1
|
vm.$emit( event, arg )
|
$emit 綁定一個自定義事件event，當這個這個語句被執行到的時候，就會將參數arg傳遞給父組件，父組件通過@event監聽並接收參數。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<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>
|
|
1
2
3
4
5
6
7
8
9
10
|
<template>
<h3>我是子組件！</h3>
</template>
<script>
export
default
{
mounted:
function
() {
this
.$emit(
'getMessage'
,
'我是父組件！'
)
}
}
</script>
|
示例效果三
https://blog.csdn.net/jingtian678/article/details/81481075 ：
Vue的項目中，如果項目簡單， 父子組件之間的數據傳遞可以使用 props 或者 $emit 等方式 進行傳遞
但是如果是大中型項目中，很多時候都需要在不相關的平行組件之間傳遞數據，並且很多數據需要多個組件循環使用。這時候再使用上面的方法會讓項目代碼變得冗長，並且不利於組件的復用，提高了耦合度。
Vue 的狀態管理工具 Vuex 完美的解決了這個問題。
看了下vuex的官網，覺得不是很好理解，有的時候我們只是需要動態的從一個組件中獲取數據（官網稱為“組件層級”：是個獨立的控件，作用范圍只在組件之內）然后想放到一個被官網稱作“應用層級”（在項目的任意地方都可以隨時獲取和動態的修改，在修改之后，vue會為你的整個項目做更新）的地方。這是我最初來學習vue的原因，我並不想做一個前端數據結構庫。。。
下面看看我一步一步的小例子
首先安裝vuex 目前公司項目已經被我從vue1.0遷移到vue2.0，下載並安裝vue
npm install vuex --save
然后在index.html同級新建文件夾store，在文件夾內新建index.js文件，這個文件我們用來組裝模塊並導出 store 的文件
【一、獲取store中的數據】
-
import Vue from 'vue'
-
import Vuex from 'vuex'
-
-
// 告訴 vue “使用” vuex
-
Vue.use(Vuex)
-
-
// 創建一個對象來保存應用啟動時的初始狀態
-
// 需要維護的狀態
-
const store = new Vuex.Store({
-
state: {
-
// 放置初始狀態 app啟動的時候的全局的初始值
-
bankInf: {"name":"我是vuex的第一個數據","id":100,"bankName":"中國銀行"}
-
}
-
})
-
// 整合初始狀態和變更函數，我們就得到了我們所需的 store
-
// 至此，這個 store 就可以連接到我們的應用中
-
export default store
在vue根文件中注冊store，這樣所有的組件都可以使用store中的數據了
我的項目文件結構：
在main.js文件中注冊store
-
import Vue from 'vue'
-
import App from './App'
-
import router from './router'
-
import store from './../store/index'
-
-
/* eslint-disable no-new */
-
new Vue({
-
el: '#app',
-
router,
-
store,
-
template: ' <App/>',
-
components: { App }
-
})
這樣簡單的第一步就完成了，你可以再任意組件中使用store中的數據，使用方法也很簡單，就是使用計算屬性返回store中的數據到一個新屬性上，然后在你模板中則可以使用這個屬性值了：
任意組件中：
-
export default {
-
...
-
computed: {
-
bankName() {
-
return this.$store.state.bankInf.bankName;
-
}
-
},
-
...
-
}
在模板中可以直接使用bankName這個屬性了，也就是store中的中國銀行
【二、在組件中修改store中的狀態 】
在任意組件中添加html模板
-
<div class="bank">
-
<list-header :headerData="bankName"></list-header>
-
04銀行詳情頁面
-
<input name="" v-model="textValue">
-
<button type="button" name="獲取數據" @click="newBankName"></button>
-
</div>
然后組件中提交mutation
-
export default {
-
...
-
computed: {
-
bankName() {
-
return this.$store.state.bankInf.bankName;
-
}
-
},
-
methods: {
-
newBankName: function() {
-
this.$store.commit('newBankName', this.textValue)
-
}
-
}
-
...
-
}
在store中的index.js中添加mutations：
-
const store = new Vuex.Store({
-
state: {
-
// 放置初始狀態 app啟動的時候的全局的初始值（//定義狀態）
-
bankInf: {"name":"我是vuex的第一個數據","id":100,"bankName":"中國銀行"},
-
count:0
-
},
-
mutations: {
-
newBankName(state,msg) {
-
state.bankInf.bankName = msg;
-
}
-
}
-
})
這樣你發現，在點擊提交按鈕的時候，頁面已經顯示你修改的數據了，並且所有復用這個組件的地方的數據全都被vue更新了；
如果在使用中發現報錯this.$store.commit is not a function ，請打開你項目的配置文件package.json，查看你正在使用的vuex的版本，我正在使用的是vuex2.0,
如果想刪除舊版本的vuex並安裝新版本的vuex請使用
npm rm vuex --save
然后安裝最新的vuex
npm install vuex --save
即可解決這個錯誤，或者是查看vuex官網api修改提交mutation的語句