当前位置:asp编程网>技术教程>MUI教程>  正文

Vue子组件和父组件相互传值的实例

2020-01-06 13:03:17   来源:www.aspbc.com   作者:wangsdong   浏览量:422   收藏

自已在搞Vue子组件和父组件相互传值的时候,花费了一两天时间,为了帮助广大的程序员遇到有个好的学习例子,我把它放出来,给大家参考,避免大家在这上面浪费太多时间

父组件,位置: /pages/index/index.vue

<template>
 <view>
<h1>{{title}}</h1>
<child @getMessage="showMsg" :msg="subtitle"></child>
 </view>
</template>
 
<script>
 import Child from '../../components/child.vue'
 export default {
components: {
Child
},
data(){
return{
title:'',
subtitle:'父窗口传过来的值'
}
},
methods:{
showMsg(title){
this.title=title;
}
}
 }
</script>

子组件,位置 /components/child.vue

<template>
 <h3>我是子组件!-{{msg}}</h3>
</template>
<script>
 export default {
props:{
msg: String
},
data(){
return{
sub_title:'子标题'
}
},
mounted: function () {
this.$emit('getMessage', '我是父组件!')
}
 }
</script>

把上面的两段代码保存起来放到HBuilderX相应的文件夹,这样就行了,运行一下,就可以看到效果。



关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网