vue子组件给父组件传值

vue子组件给父组件传值子组件:<template>  <divclass="app">    <input@click="sendMsg"type="button"value="给父组件传递值">  </div></template><script&gt

大家好,又见面了,我是你们的朋友全栈君。

子组件:

<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
            //将msg传递给父组件
            msg: "我是子组件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
             this.$emit('func',this.msg)
         }
     }
}
</script>

子组件通过this.$emit()的方式将值传递给父组件

注意:这里的func是父组件中绑定的函数名

父组件:

<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>

好了,so easy!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/134755.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 二代身份证编码规则及校验代码实现

    二代身份证编码规则及校验代码实现本文主要讨论的是二代身份证编码规则及其Java代码实现,下面的校验方式还不是特别严谨,由于只校验了前两位的省份信息,中间六位的出生日期信息和最后一位的校验码信息,故对于部分不满足要求的证件号码刚好同时满足了这里提到的几个条件,也会被判定为是合法的证件号码…1二代身份证号码编码规则1.1编码格式1999年我国颁发了第二代居民身份证号,公民身份号码为18位,且终身不变。居民身份证格式如:ABCDEF

    2022年6月27日
    89
  • C#winForm窗体美化

    C#winForm窗体美化【前言】IrisSkin是为MicrosoftVisualStudiodotNET开发的最易用的界面增强dotNET(WinForm)组件包。它能完全自动的为您的应用程序添加支持换肤功能。 【正文】添加IrisSkin4.DLL文件网上的教程有很多,这里就不再次赘述了,推荐一篇比较好的博客添加与使用教程 窗体代码如下 publicForm…

    2022年5月28日
    41
  • 服务器对cpu的性能要求比较高_服务器cpu家用缺点

    服务器对cpu的性能要求比较高_服务器cpu家用缺点如今各种大型游戏对我们的电脑性能的要求越来越高,很多用了三四年的老电脑已经带不动最新的3A巨作了,这时候大家就需要考虑更换电脑或者是升级配置了。假如选择升级配置,效果最显著的就要数更换CPU和显卡了,今天编者就来谈谈由于种种原因,性价比很低几款CPU,假如大家想要更换以下的几款CPU可要三思了。首先,编者不推荐买英特尔的第六、七代酷睿处理器,以i57500为例,散片价格在1200元左右,与同为四…

    2022年9月19日
    6
  • Java线程池七个参数详解

    本文参考:https://blog.it-follower.com/posts/1035400434.htmljava多线程开发时,常常用到线程池技术,这篇文章是对创建java线程池时的七个参数的详细解释。从源码中可以看出,线程池的构造函数有7个参数,分别是corePoolSize、maximumPoolSize、keepAliveTime、unit、workQueue、threadF…

    2022年4月4日
    72
  • 树莓派连接WiFi(最稳定的方法

    树莓派连接WiFi(最稳定的方法转载:https://i.cmgine.net/archives/11053.html概述树莓派是一个只有信用卡大小的卡片式电脑,基于ARM架构,采用Linux作为其操作系统;它默认是通过有线接口连接互联网,对于如此小巧的设备,有线连接非常不方便,下面我们介绍下如何让树莓派通过无线网卡连接网络。网上大多数文章介绍的是编辑  /etc/network/inte

    2022年6月5日
    776
  • Mac查看隐藏文件夹_不压缩文件夹设置密码

    Mac查看隐藏文件夹_不压缩文件夹设置密码一、查看隐藏文件夹:可以直接在终端执行open~/文件夹名称如:open~/.ssh二、查看隐藏文件:在Finder下进入你想要操作的文件夹,按快捷键Command+F调出搜索窗

    2022年8月1日
    7

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号