快捷導(dǎo)航

Vue.js父與子組件之間傳參示例

更新時(shí)間：2017年02月28日 16:02:56 作者：成忠

本篇文章主要介紹了Vue.js父與子組件之間傳參示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

例子：App.vue為父，引入componetA組件之后，則可以在template中使用標(biāo)簽（注意駝峰寫(xiě)法要改成componet-a寫(xiě)法，因?yàn)閔tml對(duì)大小寫(xiě)不敏感，componenta與componentA對(duì)于它來(lái)說(shuō)是一樣的，不好區(qū)分，所以使用小寫(xiě)-小寫(xiě)這種寫(xiě)法）。而子組件componetA中，聲明props參數(shù)'msgfromfa'之后，就可以收到父向子組件傳的參數(shù)了。例子中將msgfromfa顯示在<p>標(biāo)簽中。

App.vue中

 <component-a msgfromfa="(Just Say U Love Me)"></component-a>

import componentA from './components/componentA'

export default {

new Vue({

components: {

componentA

}

})

}

componentA.vue中

<p>{{ msgfromfa }}</p>

export default {

props: ['msgfromfa']

}

父向子組件傳參（.$broadcast）

用法：vm.$broadcast( event, […args] )廣播事件，通知給當(dāng)前實(shí)例的全部后代。因?yàn)楹蟠卸鄠€(gè)枝杈，事件將沿著各“路徑”通知。

例子：父組件App.vue中<input>綁定了鍵盤(pán)事件，回車觸發(fā)addNew方法，廣播事件”onAddnew”，并傳參this.items。子組件componentA中，注冊(cè)”onAddnew”事件，打印收到的參數(shù)items。

App.vue中

<div id="app">
<input v-model="newItem" @keyup.enter="addNew"/>
</div>

import componentA from './components/componentA'
export default {
new Vue({
methods: {
addNew: function() {
this.$broadcast('onAddnew', this.items)
}
}
})
}

componentA.vue中

import componentA from './components/componentA'

export default {

events: {

'onAddnew': function(items){

console.log(items)

}

}

}

子組件向父?jìng)鲄ⅲ?$emit）

用法：vm.$emit( event, […args] )，觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)。

例子：App.vue中component-a綁定了自定義事件”child-say”。子組件componentA中，單擊按鈕后觸發(fā)”child-say”事件，并傳參msg給父組件。父組件中l(wèi)istenToMyBoy方法把msg賦值給childWords，顯示在<p>標(biāo)簽中。
App.vue中

<p>Do you like me? {{childWords}}</p>
<component-a msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>

import componentA from './components/componentA'
export default {
new Vue({
data: function () {
return {
childWords: ""
}
},
components: {
componentA
},
methods: {
listenToMyBoy: function (msg){
this.childWords = msg
}
}
})
}

componentA.vue中

<button v-on:click="onClickMe">like!</button>

import componentA from './components/componentA'
export default {
data: function () {
return {
msg: 'I like you!'
}
},
methods: {
onClickMe: function(){
this.$emit('child-say',this.msg);
}
}
}

子組件向父?jìng)鲄ⅲ?$dispatch）

用法：vm.$dispatch( event, […args] )，派發(fā)事件，首先在實(shí)例上觸發(fā)它，然后沿著父鏈向上冒泡在觸發(fā)一個(gè)監(jiān)聽(tīng)器后停止。

例子：App.vue中events中注冊(cè)”child-say”事件。子組件componentA中，單擊按鈕后觸發(fā)”child-say”事件，并傳參msg給父組件。父組件中”child-say”方法把msg賦值給childWords，顯示在<p>標(biāo)簽中。

App.vue中

<p>Do you like me? {{childWords}}</p>
<component-a msgfromfa="(Just Say U Love Me)"></component-a>

import componentA from './components/componentA'
export default {
new Vue({
events: {
'child-say' : function(msg){
this.childWords = msg
}
}
})
}

componentA.vue中

<button v-on:click="onClickMe">like!</button>

import componentA from './components/componentA'
export default {
data: function () {
return {
msg: 'I like you!'
}
},
methods: {
onClickMe: function(){
this.$dispatch('child-say',this.msg);
}
}
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: