1. 程式人生 > >vue,一路走來(12)--父與子之間傳參

vue,一路走來(12)--父與子之間傳參

今天 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)--父與子之間傳參