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


相关推荐

  • 学生学籍管理系统_学生学籍管理系统的开发

    学生学籍管理系统_学生学籍管理系统的开发二需求分析2.1系统功能要求设计此系统实现如下系统功能:我们小组所设计的学生学籍管理数据库系统主要分为两大模块层面,一是:学生登录层面,二是:教师登录层面。不同层面根据不同用户的需求所实现的功能不同,这样能够更人性化地贴合个体的使用,最大程度地提升系统的使用及运行效率。所以系统设有两种不同的登录选择,用户根据实际情况自行登录,修改、查询、管理信息。学生层面:(1)

    2022年10月16日
    3
  • linux fusion io简介,linux – 收集FusionIO库存

    linux fusion io简介,linux – 收集FusionIO库存我需要编写一个脚本,从Linux服务器收集FusionIO驱动器的库存数据.我能找到的唯一方法是fio-status实用程序,但它的目的是输出人类可读的文本,而不是机器可解析的文本.我可以刮它,但那很脏.我检查/proc/fusion但它没有足够的信息可供任何使用.我希望有更好的方法,可以通过某种方式与libiodrivesdk.so或已经存在的实用程序进行交互来完成这项工作.我最初使用的是…

    2025年8月21日
    3
  • hibernate二级缓存策略

    hibernate二级缓存策略ibernate二级缓存策略2008-08-0111:00相关文章:关于HibernateCache数据库对象的缓存策略Spring+Hibernate缓存不起作用推荐圈子:JBPM@net更多相关推荐很多人对二级缓存都不太了解,或者是有错误的认识,我一直想写一篇文章介绍一下hibernate的二级缓存的,今天终于忍不住了。我的经验主要来自hi

    2022年5月23日
    33
  • 对.NET Core未来发展趋势的浅层判断「建议收藏」

    对.NET Core未来发展趋势的浅层判断「建议收藏」对.NET Core未来发展趋势的浅层判断

    2022年4月20日
    88
  • mac OS 10.15 catalina内录声音同时使用quicktime录屏教程

    mac OS 10.15 catalina内录声音同时使用quicktime录屏教程首先安装BlackHolehttps://github.com/ExistentialAudio/BlackHole其次根据这个教程在MIDI里面设置多输出设备https://github.com/ExistentialAudio/BlackHole/wiki/Multi-Output-Device在多输出设备里面排序使得内建输出排第一个,同时给内建输出和BlackHole都打上勾选…

    2022年5月20日
    46
  • idea2019永久激活注册码3月最新在线激活

    idea2019永久激活注册码3月最新在线激活,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月14日
    142

发表回复

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

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