推薦：Vue彙總
Vue - 元件傳值（父子元件間傳值、非父子元件間傳值）
如果你對元件不太了解，推薦你先閱讀它：Vue - Vue元件基礎
父子元件間傳值
父元件向子元件傳值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元件傳值</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="div">
<child :message="message"></child>
</div>
</body>
</html>
<script>
Vue.component('child' , {
props:{
message: String
},
template: '<div>{{message}}</div>'
});
var vue = new Vue({
el: '#div',
data: {
message: 'Hello Jack'
}
})
</script> 父元件向子元件傳值通過Prop這種方式，Vue - Prop。
效果：
子元件向父元件傳值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元件傳值</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="div">
<child :message="message" @click-child="clickChild"></child>
<p v-show="Boolean(value)">{{value + 'kaven'}}</p>
</div>
</body>
</html>
<script>
Vue.component('child' , {
props:{
message: String
},
data: function () {
return {
value: '你幹嘛點我！'
}
},
template: '<div @click="clickDiv">{{message}}</div>',
methods: {
clickDiv(){
this.$emit('click-child' , this.value);
}
}
});
var vue = new Vue({
el: '#div',
data: {
message: 'Hello Jack',
value: null
},
methods: {
clickChild(value) {
this.value = value;
console.log(this.value)
}
}
})
</script> 子元件向父元件傳值通過
$emit(value)
這種方式。
效果：
觸發點選事件。
非父子元件間傳值
非父子元件間傳值，如果通過一層一層的父子元件間傳值來實作就太繁瑣了，代碼也會及其複雜。這裡介紹通過釋出訂閱模式或者說觀察者模式來實作非父子元件間傳值。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元件傳值</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="div">
<child :message="message"></child>
<child message="我是另外一個子元件，和上面子元件不是父子關系。"></child>
</div>
</body>
</html>
<script>
Vue.prototype.bus = new Vue();
Vue.component('child' , {
props:{
message: String
},
data: function(){
return {
value: this.message
}
},
template: '<div @click="clickDiv">{{value}}</div>',
methods: {
clickDiv(){
this.bus.$emit('click' , this.value);
},
},
mounted: function () {
// 作用域發生變化
var _this = this;
this.bus.$on('click' , function (value) {
console.log(_this.value);
_this.value = value;
})
}
});
var vue = new Vue({
el: '#div',
data: {
message: 'Hello Jack'
}
})
</script> 你可能會在很多元件裡用到資料或者實用工具，但是不想污染全局作用域。這種情況下，你可以通過在
prototype
（原型）上定義它們，使其在每個Vue的執行個體中可用。
通過在
prototype
（原型）上定義
bus
（總線，其實就是一個Vue執行個體）來實作釋出訂閱模式，元件通過
bus
（總線）來進行釋出和訂閱消息，這樣就實作了非父子元件間傳值。
效果：
觸發第一個子元件的點選事件。
觸發第二個子元件的點選事件。