vue,一路走來(12)--父與子之間傳參
阿新 • • 發佈:2017-07-01
今天 component efault 之間 dword return his pre 傳參
今天想起一直沒有記錄父組件與子組件的傳參問題,這在項目中一直用到。
父向子組件傳參
Index.vue父組件中
<component-a :msgfromfa="(positionnow)"></component-a> import componentA from ‘./components/componentA‘
export default{ name:‘Index‘, data(){ return{ positionnow:‘‘ } } }
componentA.vue子組件中
<p>{{msgfromfa}}</p> export default{ props:[‘msgfromfa‘] }
子向父組件傳參
Index.vue父組件中
<p>Do you like me? {{childWords}}</p> <component-a 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); } } }
vue,一路走來(12)--父與子之間傳參