码迷,mamicode.com
首页 > 其他好文 > 详细

vue,一路走来(12)--父与子之间传参

时间:2017-07-01 13:40:07      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:sharp   -o   function   blog   efault   logs   没有   eth   ret   

今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到。

父向子组件传参

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)--父与子之间传参

标签:sharp   -o   function   blog   efault   logs   没有   eth   ret   

原文地址:http://www.cnblogs.com/juewuzhe/p/7101962.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!