vue2.0父子组件间传递数据的方法
更新时间：2018年08月16日 09:59:06 作者：5649498
本文通过一个小例子给大家介绍了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父子组件间传递数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
Vue3+TypeScript报错:无法找到模块xx的声明文件问题
这篇文章主要介绍了Vue3+TypeScript报错:无法找到模块xx的声明文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了vue js格式化数字为金额格式代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了Vue中引用echarts的超详细教程,文中的示例代码简洁易懂,对我们熟练使用vue有一定的帮助,需要的小伙伴可以参考一下2023-09-09
这篇文章主要介绍了vue前端项目打包成Docker镜像并运行的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue3.0如何修改浏览器标题(静态)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
electron dialog.showMessageBox的使用案例
Electron Dialog 模块提供了api来展示原生的系统对话框,本文主要介绍了electron dialog.showMessageBox的使用案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
这篇文章主要介绍了Vue element ui用户展示页面的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
为了快速学习nodejs制作后端并和数据库进行交互的方法,所以赶紧写一篇这样的文章出来,下面这篇文章主要给大家介绍了关于手把手带你使用vue+node作后端连接数据库的相关资料,需要的朋友可以参考下2023-03-03
本文主要介绍了vue3安装vant实现按需引入和全局引入，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
Vue3中新增了一种特殊的监听器watchEffect,本文主要介绍了Vue3中watchEffect高级侦听器的具体使用,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
最新评论