vue 元件通訊

mutour123發表於2018-04-29
Vue元件

父元件與子元件通訊

html:

<template id="child">
	<div>
		<h3>我是子元件</h3>
	</div>
</template>	
<div id="box">
	<child-com></child-com>
</div>
複製程式碼

js：

window.onload = function() {
	new Vue({
		el: '#box',
		data:{
			a: '我是父元件的資料'
		},
		components: {
			'child-com': {
				template: '#child'
			}
		}
	})
}
複製程式碼

如果child-com這個子元件想要拿到父元件的資料，怎麼辦？ 答案： props

在父元件中使用子元件時， 傳遞引數，如下：

<div id='#box'>
	<child-com :msg = "a"></child-com>
</div>
複製程式碼

將父元件中的a傳遞到了子元件中。 這時需要子元件接受傳遞給它的資料，如下：

	new Vue({
		el: '#box',
		data:{
			a: '我是父元件的資料'
		},
		components: {
			'child-com': {
				props: ['msg'],//這裡接受，
				template: '#child'
			}
		}
	})
複製程式碼

在props屬性裡，對應寫上需要接受的值的屬性名。就可以在子組建中使用msg這個值了。比如：

<template id="child">
	<div>
		<h3>我是子元件</h3>
		<p>{{msg}}</p>
	</div>
</template>	
複製程式碼

注意：在資料傳遞過程中，資料只能單向傳遞。當我們改變了props中對應屬性的值時，父元件是不會改變的。但是有時候我們就需要把父元件的值一起改變怎麼辦？？

第一種方法：.sync修飾符

<child-com :msg.sync = "a"></child-com><!--在msg後面跟上.sync。當子元件中改變傳入的值時，父元件就會改變-->
複製程式碼

第二種方法： 在父元件中， 把要傳遞給子元件的的資料，放入一個物件中。然後直接把整個物件傳遞到子元件中。由於物件是應用型別。所以在子元件中可以通過地址直接找到變數，並對其修改。

第三種方法： 通過$emit傳送一個自定義事件，到父元件去。

this.$emit('message', { message: this.message })
<!--在父元件中，使用$on監聽-->
<child-com v-on:message="handleMessage"></child-com>
<!--監聽到自定義事件後，得到傳遞來的資料，進行操作-->
複製程式碼

以上的通訊方式， 適用於元件是父子關係。 父傳子： 1. props 子傳父： 1. 使用物件引用 2. 使用自定義事件的方式

多個兄弟元件通訊—— 單一事件管理元件通訊

程式碼如下， 有三個兄弟元件 com-a, com-b, com-c。他們的關係是兄弟關係。 html:

<div id = "box">
	<com-a> </com-a>
	<com-b> </com-b>
	<com-c> </com-c>
</div>
複製程式碼

js:

var Event = new Vue();//全域性的，每一個元件都要訪問到的。用於管理元件通訊用的
var A = {
	template: `
		<div>
			<h3>我是A元件</h3>
			<input type="button" value="把A資料給c" @click="send">
		</div>`，
	methods: {
		send() {
			Event.$emit('a-msg', this.a)
		}
	},	
	data(){
		return {
			a: "我是a資料"
		}
	}	
}

var B = {
	template: `
		<div>
			<h3>我是B元件</h3>
			<input type="button" value="把B資料給c" @click = "send">
		</div>`,
	methods: {
		send() {
			Event.$emit("b-msg", this.b)
		}
	},	
	data(){
		return {
			b: "我是b資料"
		}
	}	
}
var C = {
	template: `
		<div>
			<h3>我是C元件</h3>
			<span>接受A的資料：{{Event.}}</span>
		</div>`,
	mounted(){
		var _this = this
		Event.$on('a-msg', function(a) {
			_this.a = a
		})
		Event.$on('b-msg', function(b) {
			_this.b = b
		})
	},
	data(){
		return {
			a: '',
			b: ''
		}
	}
}

window.onload = function() {
	new Vue({
		el: '#box',
		components: {
			'com-a': A,
			'com-b': B,
			'com-c': C
		}
	})
}
複製程式碼

如何實現上面元件中a, b 傳遞給c資料呢？ 難道都給他們一個父元件，然後通過父元件來接受和傳遞？？？

單一事件管理元件通訊

在js程式碼中尊準備一個空的全域性例項物件

var Event = new Vue();//全域性的，每一個元件都要訪問
Event.$emit(事件名稱， 資料)//每個元件需要傳遞資料給其他元件時，使用該方法傳送事件。
Event.$on(事件名稱， function(資料) {//在任意個想要獲取資料的元件中使用該方法得到資料
	//處理
}.bind(this))
複製程式碼

結尾

在春招過程中，受挫。準備學習寫文章總結學習過的東西。恰好對於元件通訊有點模糊了，所以把以前學習過的東西總結一下。

相關文章