vue2.0父子组件间传递数据的方法
时间:2021-04-27 09:07:41|栏目:vue|点击: 次
关于父子组件之间传递数据其实文档上都说得很明白。
但是如果完全不懂的人做计也看不懂,下面是一个小例子,有两个文件
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>
总结
上一篇:vue-cli单页面预渲染seo-prerender-spa-plugin操作
栏 目:vue
下一篇:vue中解决微信html5原生ios虚拟键返回不刷新问题
本文标题:vue2.0父子组件间传递数据的方法
本文地址:http://www.codeinn.net/misctech/109594.html