zoukankan      html  css  js  c++  java
  • Vue父子组件信息传递(子传父)

    子组件传递信息至父组件:
    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>

  • 相关阅读:
    计时器插件以及组件示例
    表单提交
    使用vue-awesome-swiper笔记
    使用vue-baidu-map开发地图找房的总结
    下拉加载使用dropload使用笔记
    前端知识摘要
    我不知道的css
    百度小程序笔记
    微信小程序笔记
    图片上传以及图片压缩
  • 原文地址:https://www.cnblogs.com/xiaoguniang0204/p/12302926.html
Copyright © 2011-2022 走看看