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)
上一篇 2022年6月6日 上午11:16
下一篇 2022年6月6日 上午11:16


相关推荐

  • malloc函数用法

    malloc函数用法1、函数声明void*malloc(intsize);说明:malloc向系统申请分配size字节的内存空间,返回类型为void*类型。2、使用int*p;p=(int*)malloc(sizeof(int));注意:(1)因为malloc返回的是不确定类型的指针,所以返回之前必须经过类型强制转换,否则编译报错,如:“不能将void*赋值给int*变量

    2022年6月10日
    77
  • 2022年面试必问的Python面试题&答案

    2022年面试必问的Python面试题&答案Python新手在谋求一份Python编程工作前,必须熟知Python的基础知识。这里我为大家准备了一份2022年最常见Python面试题合集,既有基本的Python面试题,也有高阶版试题来指导你准备面试,试题均附有答案。面试题内容包括编码、数据结构、脚本撰写等话题。

    2025年5月28日
    3
  • redis一级缓存和二级缓存_面试官让面试者先回去

    redis一级缓存和二级缓存_面试官让面试者先回去说起mybatis,大家可能都知道它是一个优秀的久层框架,它支持定制化SQL、存储过程以及高级映射。面试中都会问起mybatis一级缓存和二级缓存,它体现出你对mybatis这个开发中的理解,如果照着答案背的话只能拿到一个及格分,所以今天咱们就好好聊聊mybatis。另外本人整理了20年面试题大全,包含spring、并发、数据库、Redis、分布式、dubbo、JVM、微服务等方面总结,下图是部分截图,需要的话点这里点这里,暗号CSDN。1.首先,什么是Mybatis?MyBatis是一.

    2026年2月2日
    9
  • 最大池化[通俗易懂]

    最大池化[通俗易懂]TensorFlow最大池化由Aphex34(自己的作品) CCBY-SA4.0,通过WikimediaCommons共享这是一个最大池化的例子maxpooling&

    2022年8月5日
    10
  • WinClaw – 威努特推出的桌面 AI 智能体平台

    WinClaw – 威努特推出的桌面 AI 智能体平台

    2026年3月14日
    3
  • Redis能干啥?细看11种Web应用场景

    Redis能干啥?细看11种Web应用场景

    2021年10月10日
    48

发表回复

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

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