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父子组件间传递数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
vue-cli如何关闭Uncaught error的全屏提示
这篇文章主要介绍了vue-cli如何关闭Uncaught error的全屏提示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了Vue github用户搜索案例分享，文章基于Vue的相关资料展开对主题的详细介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-04-04
树节点所展示的街道是读取的成都市金牛区的范围边界线的json文件,街道下对应内容市通过fetch调用接口获取的内容,通过mapTreeData函数循环遍历,对数据进行处理,这篇文章主要介绍了vue3+elementplus 树节点过滤功能实现,需要的朋友可以参考下2024-05-05
vue按住shift键多选方式(以element框架的table为例)
这篇文章主要介绍了vue按住shift键多选方式(以element框架的table为例),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
代码添加了一个vDistpickerHandle的事件处理函数对地区选择器中的数据进行处理,将数据存储到form对象的相应属性中,方便数据提交,这篇文章主要介绍了v-distpicker地区选择器组件使用,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍了vue2如何实现点击预览本地的word、excle、pdf文件,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
vue3二次封装element-ui中的table组件的过程详解
这篇文章主要给大家介绍了vue3二次封装element-ui中的table组件的过程,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友跟着小编一起来学习吧2024-01-01
这篇文章主要介绍了Vue安装Element Plus全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了解决vue项目 build之后资源文件找不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue如何通过插槽组件之间数据传递问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
最新评论