vue元件間的傳值

  我之前有篇部落格寫了關于vue-cli腳手架的安裝教程，沒有看過的可以點選連結進行檢視，寫的挺詳細的。最近在看vue的一些教程，看到斷斷續續的，有點慚愧啊！看到了vue中元件之間的傳值就記錄了下來友善檢視。

  首先，vue中元件之間的傳值分為：父子之間的傳值和兄弟之間的傳值。

父子之間的傳值

父元件傳遞給子元件值

1. 父元件中引入子元件，并注冊子元件(就是引入該元件)
2. 父元件中使用子元件
3. 父元件調用子元件時使用 v-bind 綁定傳遞給子元件的值
4. 在子元件中使用 props 接收傳遞到的值

子元件傳遞給父元件值

1. 在子元件中使用 ‘this.$emit(‘自定義方法名’，值)’，如下：

<p @click="SendMsg">登陸</p>

//methods方法中
	methods:{
		SendMsg(){
			//GetMsg是在父元件中要自定義事件的方法名
			this.$emit("GetMeg",123)    //123是要傳遞的值，
		}
	}
           

1. 父元件中調用子元件的時候要自定義事件 <Child :value=“title” @GetMsg=“Result”/> , 其中value中的值就可以在子元件中用props來接收，GetMsg 就是上一步在子元件中傳遞的方法名。

//同樣在methods方法中接收傳遞的值
	methods{
		Result(data){    //注意這裡的方法名稱不是GetMsg，而是Result，GetMsg隻是父元件和子元件之間通信的約定
			console.log(data);     //123
		}
	}
           

兄弟元件之間的傳值

  ps:在做大型的項目時，推薦使用vue提供的vuex來管理元件之間的通信

  vue中元件之間不能夠像父子元件之間那樣直接傳值，兄弟元件之間進行傳值需要一個中間橋梁，子元件需要先将資料傳遞給公共元件，然後公共元件再将資料傳遞給需要的子元件。（等于是所有的子元件都是從公共元件中提取資料）

  建立公共元件Common.vue：

import Vue from 'vue'
export default new Vue()
           

1. 在子元件 Child1 和子元件 Child2 中引入Common元件
2. 元件1中：

//methods中
Handleprice(newprice){     //使用 $emit 來綁定
	changeprice.$emit("NewPrice",123);
}
           

1. 元件2中：

//在接收的時候使用 $on 來接收傳值
changeprice.$on("NewPrice",(data)=>{
	console.log(data);   //123
})
           

  其實，兄弟元件之間的傳值也是和vuex原理一樣，說實話兄弟元件之間的傳值我還不是太清楚，我vuex才接觸了一點，還沒有深入了解，但是原理應該能明白一些。等我學完vue和vuex之後再給大家詳細的介紹這其中的原理。

  因為小編學的也不太深，隻能把自己學習時的筆記來解釋一番，寫的有錯誤的地方歡迎大家指出，定會改正。