首页 > 编程 > JavaScript > 正文

vue2.0父子组件间传递数据的方法

2019-11-19 13:14:43
字体:
来源:转载
供稿:网友

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

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

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父子组件间传递数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表