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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • centos7.6安装yum模块

    centos7.6安装yum模块准备阶段:查看系统版本:目的是为后面正确下载对应版本的安装包,包不对会让你走很多弯路#cat/etc/redhat-release版本号为:CentOSLinuxrelease7.6.1810(Core)一:卸载老的安装#检查老的安装rpm-qa|grepyum#卸载老的安装rpm-aq|grepyum|xargsrpm-e–nodeps…

    2022年5月6日
    47
  • ansible安装部署步骤

    目录Ansible概述1、关闭防火墙2、安装相关软件3、修改主机清单4、创建密钥对,进行远程连接5、将公钥上传到被监控端6、设置ssh免交互登录Ansible概述Ansible可以同时管理Redhat系的Linux,Debian系的Linux,以及Windows主机。管理节点只在执行脚本时与远程主机连接,没有特别的同步机制,所以断电等异常一般不会影响ansbile。ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet、cfengine、chef、fun

    2022年4月6日
    63
  • Windows 7里的“隐藏”特性:Guest Mode

    Windows 7里的“隐藏”特性:Guest Mode

    2021年8月2日
    67
  • django常见问题_网申项目报错可以改吗

    django常见问题_网申项目报错可以改吗报错情况Django使用makemigrations做数据迁移的时候报如下错误File"/Users/jkc/.virtualenvs/django_env/lib/python3.7

    2022年8月7日
    6
  • C++面试题之浅拷贝和深拷贝的区别「建议收藏」

    C++面试题之浅拷贝和深拷贝的区别「建议收藏」先考虑一种情况,对一个已知对象进行拷贝,编译系统会自动调用一种构造函数——拷贝构造函数,如果用户未定义拷贝构造函数,则会调用默认拷贝构造函数。先看一个例子,有一个学生类,数据成员时学生的人数和名字:#include&lt;iostream&gt;usingnamespacestd;classStudent{private: intnum; c…

    2022年10月1日
    2
  • 网络协议之视频直播核心技术讲解

    网络协议之视频直播核心技术讲解网络视频直播存在已有很长一段时间,随着移动上下行带宽提升及资费的下调,视频直播被赋予了更多娱乐和社交的属性,人们享受随时随地进行直播和观看,直播的打开时间和延迟变成了影响产品功能发展重要指标。那么,问题来了:如何实现低延迟、秒开的直播?先来看看视频直播的5个关键的流程:录制->编码->网络传输->解码->播放每个环节对于直播的延迟都会产生不同程度的影响。这里重点分析移动设备的情况。受限于技术的成熟度、硬件环境等,我们针对移动场景简单总结出直播延迟优化的4个点…

    2022年7月21日
    18

发表回复

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

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