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)


相关推荐

  • FindWindowEX应用实例二则[通俗易懂]

    FindWindowEX应用实例二则[通俗易懂]函数功能:该函数获得一个窗口的句柄,该窗口的类名和窗口名与给定的字符串相匹配。这个函数查找子窗口,从排在给定的子窗口后面的下一个子窗口开始。在查找时不区分大小写。    函数原型:HWNDFindWindowEx(HWNDhwndParent,HWNDhwndChildAfter,LPCTSTRlpszClass,LPCTSTRlpszWindow);    参数;    hwndPar

  • centos7系统更新命令_centos 更新

    centos7系统更新命令_centos 更新1.查看网络IP ifconfig2.下载命令 wget+网址3.安装 yum-y install + 目标4.删除文件 sudo rm 文件所在目录/目标强制删除文件 rm -f删除目录 rm -rf5.复制一个文件到另一个文件夹sudo cp /文件夹/文件 /另一个文件夹6.对一些文件进行读写sudo vim 文件名7….

  • CentOS7下安装FTP服务

    CentOS7下安装FTP服务

    2021年10月19日
  • android更换开机动画,修改安卓开机动画(除了部分系统 如MIUI等)

    android更换开机动画,修改安卓开机动画(除了部分系统 如MIUI等)该楼层疑似违规已被系统折叠隐藏此楼查看此楼这技术已经很久了,但还是忍不住搬运了一下。出处是百度的,很久很久以前玩手机在百度上学的我这里说的开机动画是指开机的第二屏开机动画可以在下载的rom里修改,也可以刷机后修改(推荐后者,因为比较方便,免签名)前提:手机要ROOT提权,用R.E.管理器粘贴复制首先,开机动画的地址:system\media\bootanimation.zip要修改开机动画就是修…

  • matlab的三维绘图和四维绘图「建议收藏」

    matlab的三维绘图和四维绘图「建议收藏」一、三维绘图1.曲线图plot3(X1,Y1,Z1,…):以默认线性属性绘制三维点集(X1,Y1,Z1)确定的曲线 plot3(X1,Y1,Z1,LineSpec):以参数LineSpec确定的线性属性绘制三维点集 plot3(X1,Y1,Z1,’PropertyName’,PropertyValue,…):根据指定的属性绘制三维曲线theta=0:0.01*pi:2*…

    2022年10月11日
  • 八数码问题求解「建议收藏」

    八数码问题求解「建议收藏」(一)问题描述在一个3*3的方棋盘上放置着1,2,3,4,5,6,7,8八个数码,每个数码占一格,且有一个空格。这些数码可以在棋盘上移动,其移动规则是:与空格相邻的数码方格可以移入空格。现在的问题是:对于指定的初始棋局和目标棋局,给出数码的移动序列。该问题称八数码难题或者重排九宫问题。(二)问题分析八数码问题是个典型的状态图搜索问题。搜索方式有两种基本的方式,即树式搜索和线式搜索。搜索策略大体有盲…

发表回复

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

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