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>

  • 相关阅读:
    开启gpu加速的高性能移动端相框组件!
    一看就懂得移动端rem布局、rem如何换算
    加密算法
    YDNKJS 笔记
    JavaScript函数
    测试下
    console前端代码自动删除QQ空间我的说说
    前端规范
    解决方案
    重读js高程笔记二
  • 原文地址:https://www.cnblogs.com/xiaoguniang0204/p/12302926.html
Copyright © 2011-2022 走看看