码迷,mamicode.com
首页 > 其他好文 > 详细

父子组件信息传递(子传父)

时间:2020-02-13 13:23:52      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:cat   one   return   data   app   自定义   监听   white   cli   

子组件传递信息至父组件:
1、子组件发射自定义事件及信息,自定义事件名称b=function(){this.$emit("发射事件a",参数)}
2、自定义模版中,设置对自定义事件的触发条件监听,如@click=“自定义事件b”
3、父组件中设置监听,@“发射事件a及参数”="父组件事件c及参数",实现将子组件信息传至父组件
从而实现子组件信息传达至父组件

<body> <div id = "app"> <cnp @btclick="fclick"></cnp> </div> <!-- //template 编写自己的模版 --> <template id = "mytemp"> <div>
//v-on绑定自定义事件 <button v-for="item in categories" @click="chclick(item)" > {{item.name}} </button> </div> </template> <script> //创建子组件 #mytemp 创建组件构造器对象 const cnp = { template:"#mytemp", data () { return { categories:[ {id:"aaa",name:"电器"}, {id:"bbb",name:"食品"}, {id:"ccc",name:"服装"}, ] } }, methods: { chclick(item){ //发射事件(自定义事件):名称,参数 this.$emit("btclick",item) } } } //创建父组件 const app = new Vue({ el:"#app", data () { return { } }, methods:{ fclick(item){ console.log(打印子组件传递信息 + item.name); } }, //组件注册的语法糖 components: { cnp } }); </script> </body>

 


父子组件信息传递(子传父)

标签:cat   one   return   data   app   自定义   监听   white   cli   

原文地址:https://www.cnblogs.com/xiaoguniang0204/p/12302926.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!