zoukankan      html  css  js  c++  java
  • 复习一下vue的子父通信

    之前一直没太用,等到用的时候就有点迷糊了,百度了一下,总结一下 
     
    **子父通信是通过$emit**
        1.给子组件绑定自定义事件@事件名="事件函数"  在事件函数里面通过this.$emit 绑定父组件的事件,再把需要传的值写在里面
        2.在父组件中挂载的子组件上绑定父组件的自定义事件,在这个自定义的事件里面接收子组件传过来的值就可以了
     
    ***子组件***
    <template>  
       <div class="app">
          <input @click="sendMsg" type="button" value="给父组件传递值"> <!--自定义的事件也可以在template里里面写-->
       </div>
    </template>
    <script>
    export default {
        data () {
            return {
                //将msg传递给父组件
                msg: "我是子组件的msg",
            }
        },
         methods:{
             sendMsg(){
                 //func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
                 this.$emit('func',this.msg)
             }
         }
    }
    <script>
    ***父组件***
    <template>
        <div class="app">
            <child @func="getMsgFormSon"></child>
        </div>
    </template>
    <script>
    import child from './child.vue'
    export default {
        data () {
            return {
                msgFormSon: "this is msg"
            }
        },
        components:{
            child,
        },
        methods:{
            getMsgFormSon(data){
                this.msgFormSon = data
                console.log(this.msgFormSon)
            }
        }
    }
    </script>
  • 相关阅读:
    mac crontab
    mac 修改MAC代码
    python 二叉树计算器
    python 验证码识别
    scp 上传和下载文件
    centos 开机执行的命令
    centos aws 修改使用密码ssh登录
    python nose测试
    C# linq to xml
    Visual Studio 2015+InstallShield 2015
  • 原文地址:https://www.cnblogs.com/Jerry1208/p/11849636.html
Copyright © 2011-2022 走看看