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>
  • 相关阅读:
    dba_tables表中的num_rows与count(*)的值为何不同
    Mysql查询数据库中的表名/模糊查询
    Nginx配置静态文件(浏览器的缓存)
    UEditor支持数学公式
    小程序H5的自动登录(后台Shiro)
    Ubuntu的邮件发送
    Infosec Tool List
    检测configMap,重载Pod内的业务容器
    CNI calico插件使用注意事项
    kspan 集群度量方案
  • 原文地址:https://www.cnblogs.com/maycpou/p/14736711.html
Copyright © 2011-2022 走看看