例子：App.vue為父，引入componetA組件之后，則可以在template中使用標(biāo)簽（注意駝峰寫法要改成componet-a寫法，因為html對大小寫不敏感，componenta與componentA對于它來說是一樣的，不好區(qū)分，所以使用小寫-小寫這種寫法）。而子組件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)前實例的全部后代。因為后代有多個枝杈，事件將沿著各“路徑”通知。

例子：父組件App.vue中<input>綁定了鍵盤事件，回車觸發(fā)addNew方法，廣播事件”onAddnew”，并傳參this.items。子組件componentA中，注冊”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)}}} 

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

用法：vm.$emit( event, […args] )，觸發(fā)當(dāng)前實例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調(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);}}}