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>
  • 相关阅读:
    网页端打开手机上的app
    iOS 9学习系列:打通 iOS 9 的通用链接(Universal Links)
    自定义 URL Scheme 完全指南
    App开发流程之加密工具类
    iOS8系统H264视频硬件编解码说明
    人脸识别
    app上线具体流程
    第三方分享
    Android摸索-二、解决Android SDK Manager下载太慢问题
    Android摸索一环境搭建
  • 原文地址:https://www.cnblogs.com/maycpou/p/14736711.html
Copyright © 2011-2022 走看看