zoukankan      html  css  js  c++  java
  • vue(15)子组件与父组件通信 调用父组件的方法并传递参数

    子组件:发出事件

    <template>
    <div>
        <button @click="count(1)">+</button>//点击调用本身定义的count方法,传入参数1
    </div>
    </template>

    <script>
    export default ({
        data:function(){

        },
        methods:{
            count(data){
                this.$emit('countEvent',data);//调用父组件的countEvent事件,将data变量作为参数传入
            }
        }
    })
    </script>

    <style scoped>

    </style>
    父组件:接收事件
    <template>
        <div>
          {{count}}//显示变量count到页面上
          <HelloWorld @countEvent="countFun"></HelloWorld>//定义countEvent事件,将事件绑定到自己的方法countFun上
        </div>
    </template>

    <script>
    import HelloWorld from './component/HelloWorld'

    export default {
       name:"App",
       data:function(){
           return {
            count:1//定义count变量,初始值为1
           };
       },
       components:{
           HelloWorld
       },
       computed:{
           
       },
       methods:{
          countFun(data){//子组件发出事件后,父组件的这个事件绑定到了countFun方法,相当于子组件调用了父组件的countFun方法并出入参数
            this.count = this.count+data;//在方法中根据子组件传入的值改变父组件定义的count变量
          }
       }
    }
    </script>

    <style scoped>
    </style>
  • 相关阅读:
    腾讯2014年实习生招聘笔试面试经历
    Unity MVC框架 StrangeIoC
    Android入门第八篇之GridView(九宫图)
    拓扑排序
    C:打印菱形(自己的方法)
    JSP中Session的使用
    继承Application实现Android数据共享
    使用Java高速实现进度条
    首次启动优美新手指引tip
    递归算法
  • 原文地址:https://www.cnblogs.com/maycpou/p/14736711.html
Copyright © 2011-2022 走看看