vue子组件向父组件传值的方法

vue子组件向父组件传值的方法子组件向父组件,使用$emit方法,demo:子组件的代码:<template><div><h1>thisischildcomponent</h1><button@click=”toParent”>向父组件传值</button></div>…

大家好,又见面了,我是你们的朋友全栈君。

子组件向父组件,使用$emit方法,demo:

子组件的代码:

<template>
    <div>
        <h1>this is child component</h1>
        <button @click="toParent">向父组件传值</button>
    </div>
</template>


<script>
export default {
    data() {
        return {
            data1: '子组件的数据'
        }
    },
    methods: {
        toParent:function() {
            this.$emit('event1', this.data1)
        }
    }
}
</script>

<style scoped>
    div {
        border: 1px solid red;
    }
</style>

父组件的代码:

<template>
    <div>
        {
  
  { newData }}
        <child @event1="change($event)"></child>
        
    </div>
</template>


<script>
import child from './child'
export default {
    data() {
        return {
            newData: '这是父组件的数据'
        }
    },
    methods: {
        change(data) {
            this.newData = data;
        }
    },
    components: {child}
}
</script>

<style>

</style>

代码解释:

1、在子组件中,首先需要使用$emit方法,该方法接收2个参数,第一个参数是事件的名称,自己随意定义。第二个参数是需要传递的数据,可以是对象,也可以是字符串类型。$emit是VUE实例中的一个方法,所以前面要加上this,可以在钩子函数中执行,也可以由某个事件触发执行。

2、在父组件中,程序会查找刚才在子组件中注册的事件名,该事件又有一个方法change,change方法将newData的值改变了。

 

传值之前:

vue子组件向父组件传值的方法

传值之后:

vue子组件向父组件传值的方法

 

 

 

 

 

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

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

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

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

(0)
blank

相关推荐

  • ubuntu桌面主题更换_更换主题的软件

    ubuntu桌面主题更换_更换主题的软件目录一、安装必要的工具二、下载主题三、更换主题一、安装必要的工具为了使下载的主题能应用于Ubuntu,我们必须在Ubuntu上安装几个工具:sudoapt-getupdatesudoapt-getinstallgnome-tweak-toolsudoapt-getinstallgnome-shell-extensions上述第三条命令若执行失败,请读者自行百度解决方案。以上命令执行完成后,我们的Ubuntu就安装了Tweak-tool工具,可以从Ubuntu的管理工具“软件”

  • 什么是HEVC?解释了高效视频编码,H.265和4K压缩

    什么是HEVC?解释了高效视频编码,H.265和4K压缩高效视频编码(HEVC),也称为H.265,可以通过蓝光最佳视频压缩方法实现两倍的压缩。但它是如何工作的,是否足以让我们看到更好看的4K内容? 我想称之为H.265,因为它听起来很酷,但它的全称是高效视频编码(HEVC)。它是高级视频编码(AVC)的新继承者,也称为H.264,它是蓝光使用的压缩方案之一。HEVC的想法是提…

  • 【漏洞挖掘】QQ钓鱼网站实战渗透[通俗易懂]

    【漏洞挖掘】QQ钓鱼网站实战渗透[通俗易懂]渗透实战,通过报错注入拿到后台账号密码。

  • ringbuffer 无锁队列_wear ring

    ringbuffer 无锁队列_wear ring最近常收到SOD框架的朋友报告的SOD的SQL日志功能报错:文件句柄丢失。经过分析得知,这些朋友使用SOD框架开发了访问量比较大的系统,由于忘记关闭SQL日志功能所以出现了很高频率的日志写入操作,从而偶然引起错误。后来我建议只记录出错的或者执行时间较长的SQL信息,暂时解决了此问题。但是作为一个热心造轮子的人,一定要看看能不能造一个更好的轮子出来。前面说的错误原因已经很直白了,就是频繁的日志写入导…

  • matlab中Regionprops函数详解——度量图像区域属性

    matlab中Regionprops函数详解——度量图像区域属性声明:原文链接https://blog.csdn.net/langb2014/article/details/49886787点击打开链接,仅学习使用,写的很不错。Regionprops:用途是getthepropertiesofregion,即用来度量图像区域属性的函数。语法:STATS=regionprops(L,properties)描述:测量标注矩阵L中每一个…

    2022年10月28日
  • 什么是IO流_io流实现

    什么是IO流_io流实现什么是IO流先看一段百度上的解释:当然:如果你看不懂,那么你只需要记住下面3句话.1.(1).我们知道,每个人家里喝的水都是从自来水厂来的,自来水厂的水又是从水源地来的,(2).水是通过水管来的。(3).那么这当中的水流,便可以理解为IO流。2. 那么JAVA中的IO流呢; (1).在java中,java就是自来水厂,水源地就是源,家就是目的(2)./

    2022年10月20日

发表回复

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

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