傳值方式有：props和「$emit」、「$attrs」和「$listeners」、中央事件匯流排、v-model、provide和inject、「$parent」和「$children」、 vuex、localStorage/session。
本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
對於vue來說，元件之間的訊息傳遞是非常重要的，以下是我對元件之間訊息傳遞的常用方式的總結。
props和$emit(常用)
$attrs和$listeners
中央事件匯流排（非父子元件間通訊）
v-model
#provide和inject
$parent和$children
vuex
父元件向子元件傳遞資料是透過prop傳遞的，子元件傳遞資料給父元件是透過$emit觸發事件來做到的.
Vue.component('child',{ data(){ return { mymessage:this.message } }, template:` <div> <input type="text" v-model="mymessage" @input="passData(mymessage)"> </div> `, props:['message'],//设置props属性值，得到父组件传递过来的数据 methods:{ passData(val){ //触发父组件中的事件，向父组件传值 this.$emit('getChildData',val) } } }) Vue.component('parent',{ template:` <div> <p>this is parent compoent!</p> <child :message="message" v-on:getChildData="getChildData"></child> </div> `, data(){ return { message:'hello' } }, methods:{ //执行子组件触发的事件 getChildData(val){ console.log(val) } } })在上面的範例中，有父元件parent和子元件child。
父元件傳遞了message資料給子元件，並且透過v-on綁定了一個getChildData事件來監聽子元件的觸發事件；
#子元件透過props得到相關的message資料,最後透過this.$emit觸發了getChildData事件
$attrs和$listeners
Vue.component('C',{
template:`
<div>
<input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)"> </div>
`,
methods:{
passCData(val){
//触发父组件A中的事件
this.$emit('getCData',val)
}
}
})
Vue.component('B',{
data(){
return {
mymessage:this.message
}
},
template:`
<div>
<input type="text" v-model="mymessage" @input="passData(mymessage)">
<!-- C组件中能直接触发getCData的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
<!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
<C v-bind="$attrs" v-on="$listeners"></C>
</div>
`,
props:['message'],//得到父组件传递过来的数据
methods:{
passData(val){
//触发父组件中的事件
this.$emit('getChildData',val)
}
}
})
Vue.component('A',{
template:`
<div>
<p>this is parent compoent!</p>
<B :messagec="messagec" :message="message" v-on:getCData="getCData" v-on:getChildData="getChildData(message)"></B>
</div>
`,
data(){
return {
message:'hello',
messagec:'hello c' //传递给c组件的数据
}
},
methods:{
getChildData(val){
console.log('这是来自B组件的数据')
},
//执行C子组件触发的事件
getCData(val){
console.log("这是来自C组件的数据："+val)
}
}
})中央事件匯流排上面兩種方式處理的都是父子元件之間的資料傳遞，而如果兩個元件不是父子關係呢？這種情況下可以使用中央事件匯流排的方式。新建一個Vue事件bus對象，然後透過bus.$emit觸發事件，bus.$on監聽觸發的事件。
Vue.component('brother1',{
data(){ return {
mymessage:'hello brother1'
}
},
template:` <p>
<p>this is brother1 compoent!</p>
<input type="text" v-model="mymessage" @input="passData(mymessage)">
</p> `,
methods:{
passData(val){ //触发全局事件globalEvent
bus.$emit('globalEvent',val)
}
}
})
Vue.component('brother2',{
template:` <p>
<p>this is brother2 compoent!</p>
<p>brother1传递过来的数据：{{brothermessage}}</p>
</p> `,
data(){ return {
mymessage:'hello brother2',
brothermessage:''
}
},
mounted(){ //绑定全局事件globalEvent
bus.$on('globalEvent',(val)=>{ this.brothermessage=val;
})
}
}) //中央事件总线
var bus=new Vue(); var app=new Vue({
el:'#app',
template:` <p>
<brother1></brother1>
<brother2></brother2>
</p> `
})provide和inject
#在Vue.js 的2.2.0
# 版本中加入加了provide 和inject 選項。他們成對出現，用於父級組件向下傳遞資料。
父元件中透過provider來提供變量，然後在子元件中透過inject來注入變數。不論子元件有多深，只要呼叫了inject那麼就可以注入provider中的資料。而不是局限於只能從當前父組件的prop屬性來獲取數據，只要在父組件的生命週期內，子組件都可以調用。
Vue.component('child',{
inject:['for'],//得到父组件传递过来的数据
data(){
return {
mymessage:this.for
}
},
template:`})
Vue.component('parent',{
template:`this is parent compoent!`,
provide:{
for:'test'
},
data(){
return {
message:'hello'
}
}
})v-model
Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性 },
data(){ return {
mymessage:this.value
}
},
methods:{
changeValue(){ this.$emit('input',this.mymessage);//通过如此调用可以改变父组件上v-model绑定的值 }
},
template:` <p>
<input type="text" v-model="mymessage" @change="changeValue">
</p> })
Vue.component('parent',{
template:` <p>
<p>this is parent compoent!</p>
<p>{{message}}</p>
<child v-model="message"></child>
</p> `,
data(){ return {
message:'hello'
}
}
}) var app=new Vue({
el:'#app',
template:` <p>
<parent></parent>
</p> `
})$parent和$children##在元件內部可以直接透過子元件$parent對父元件進行操作，父元件透過$children對子元件進行操作.
Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性 },
data(){ return {
mymessage:this.value
}
},
methods:{
changeValue(){ this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值 }
},
template:` <p>
<input type="text" v-model="mymessage" @change="changeValue">
</p> })
Vue.component('parent',{
template:` <p>
<p>this is parent compoent!</p>
<button @click="changeChildValue">test</button >
<child></child>
</p> `,
methods:{
changeChildValue(){ this.$children[0].mymessage = 'hello';
}
},
data(){ return {
message:'hello'
}
}
}) var app=new Vue({
el:'#app',
template:` <p>
<parent></parent>
</p> `
})vuex處理元件之間的資料互動
##如果業務邏輯複雜，很多組件之間需要同時處理一些公共的數據，這個時候才有上面這一些方法可能不利於項目的維護，vuex的做法就是將這一些公共的數據抽離出來，然後其他元件就可以對這個公共資料進行讀寫操作，這樣達到了解耦的目的。
localStorage / sessionStorage
window.localStorage.getItem(key) 取得資料
透過###window.localStorage.setItem(key,value) ###儲存資料## ####注意用JSON.parse() / JSON.stringify() 做資料格式轉換######localStorage / sessionStorage可以結合vuex，實現資料的持久保存，同時使用vuex解決資料和狀態混亂問題。 ######【相關推薦：《###vue.js教學###》】###以上是vue傳值有哪8種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
