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!

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 创建pytorch环境_Udacity pytorch

    创建pytorch环境_Udacity pytorch在window下安装pippip更换国内镜像源安装pytorchAnaconda+Pycharm环境下的PyTorch配置方法

  • 请慎用ASP.Net的validateRequest=”false”属性

    请慎用ASP.Net的validateRequest=”false”属性阅读全文下载代码:http://www.cckan.net/forum.php?mod=viewthread&tid=74在客户端的文体框里输入“例如”等字符的时候为出现这样的错误序安全的尝试,如跨站点的脚本攻击。通过在Page指令或配置节中设置validateRequest=false可以禁用请求验证。但是,在这种情况下,强烈建议应用程序显式检查所有输入。 异常

  • 计算机用户名,账户名更改

    计算机用户名,账户名更改计算机用户名,winr按键同时,输入netplwiz.进入用户账户界面(高级),双击即可更改。账户名更改,通过控制面板更改。

    2022年10月14日
  • cocos2d-x 3.0游戏实例学习笔记 《跑酷》 完结篇–源代码放送

    cocos2d-x 3.0游戏实例学习笔记 《跑酷》 完结篇–源代码放送

  • Mysql海量数据处理

    Mysql海量数据处理一说海量数据有人就说了直接用大数据,那只能说不太了解这块,为此我们才要好好的去讲解一下海量的处理海量数据的处理分为两种情况1)表中有海量数据,但是每天不是很快的增长2)表中有还流量数据,而且每天很快速的增长针对这了两种情况,我们给出的解决方案也不太一样,而且也不是所有的项目都是这样的情况。海量数据的解决方案1)使用缓存2)页面静态化技术3)数据库优化4)分离数据库中活跃的…

  • J2EE项目系列(三)–Spring Data JPA+Spring+SpringMVC+Maven快速开发(1)项目架构

    J2EE项目系列(三)–Spring Data JPA+Spring+SpringMVC+Maven快速开发(1)项目架构好久没给大家弄Java后端项目系列了,因为接了Java后端外包以及学习一些后端优化的东西。而现在开始慢慢在这个系列的(三)逐渐把后端外包的一些有价值的东西分享给大家,并且自己也总结一遍嘛。本博客是这个系列的第一篇,所以先讲下项目架构。另外,这个系列还有一些我在外包项目过程中做的优化,七牛云,云旺IM等使用,以及解决一些小bug等等技巧。

发表回复

您的电子邮箱地址不会被公开。

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