本文通过一个小例子给大家介绍了vue2.0父子组件间传递数据的方法,需要的朋友参考下吧

关于父子组件之间传递数据其实文档上都说得很明白。

 但是如果完全不懂的人做计也看不懂,下面是一个小例子,有两个文件

1.parent.vue

<template>
 <child :child-msg="msg" @ok="event"></child>
</template>
<script>
import child from './child.vue';
export default {
 data(){
  return{
   msg:'hello worldgogo'
  }
 },
 components:{
  child
 },
 methods:{
  event(val){
    console.log(val);
  }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2.child.vue

<template>
  <p>{{childMsghello}}</p>
</template>
<script>
export default {
  props: ['childMsg'],
  data(){
    return{
      childMsghello:this.childMsg+'this is child'
    }
  },
  created(){
    //自定义事件,并且给监听此事件的回调函数的值设为200
    this.$emit('ok','200');
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

总结

以上所述是小编给大家介绍的vue2.0父子组件间传递数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

最新资讯
拼多多要起诉羊毛党? 回应:截图是PS的

拼多多要起诉羊毛党?

网友晒出其与拼多多“人员”的聊天记录,对方称此行为已
雪球创始人方三文:最优质的公司是不融资、少融资

雪球创始人方三文:最优

1月20日上午消息,2019极客公园创新大会上,雪球创始人方
拼多多百元券漏洞 撸了一辆宝马的羊毛要进去过年吗?

拼多多百元券漏洞 撸

有人在微信群里晒出截图,疑似拼多多公关的人在跟撸羊毛
传拼多多告诫“薅羊毛”者:希望如数归还 否则起诉

传拼多多告诫“薅羊毛

今天上午9点,拼多多已将相关优惠券全部下架,并私信向“
拼多多现重大BUG被“薅羊毛” 一晚损失200亿?

拼多多现重大BUG被“

1月20日午间消息,今天凌晨,拼多多被曝出现重大BUG,用户
京东物流王振辉:满意度达82% 今年投10亿奖励人才

京东物流王振辉:满意度

1月20日上午消息,京东物流举行2019年展望大会。京东物
最新文章
微信小程序CSS3动画下拉菜单效果

微信小程序CSS3动画下

这篇文章主要为大家详细介绍了微信小程序CSS3动画下拉
微信小程序使用swiper组件实现层叠轮播图

微信小程序使用swiper

这篇文章主要为大家详细介绍了微信小程序使用swiper组
微信小程序实现带缩略图轮播效果

微信小程序实现带缩略

这篇文章主要为大家详细介绍了微信小程序实现带缩略图
小程序实现五星点评效果

小程序实现五星点评效

这篇文章主要为大家详细介绍了小程序实现五星点评效果
微信小程序实现笑脸评分功能

微信小程序实现笑脸评

这篇文章主要为大家详细介绍了微信小程序实现笑脸评分
微信小程序自定义轮播图

微信小程序自定义轮播

这篇文章主要为大家详细介绍了微信小程序自定义轮播图