首页 > 代码库 > vue,一路走来（12）--父与子之间传参
vue,一路走来（12）--父与子之间传参
今天想起一直没有记录父组件与子组件的传参问题，这在项目中一直用到。
父向子组件传参
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）--父与子之间传参
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。