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)


相关推荐

  • 直读光谱仪分析谱线_频谱分析仪主要有哪几种

    直读光谱仪分析谱线_频谱分析仪主要有哪几种为什么使用频谱仪?01认识频谱电磁频谱,是指按电磁波波长(或频率)连续排列的电磁波族,是一种看不见摸不着但时刻伴随我们的东西。当我们使用电磁波将一串信息发送出去时,在时域上他是一段强度不同,疏密变化的时间信号,在其中的任意时刻,你所能获取的只有他的强度;当我们换个角度,站在频域上来看时,在信号的每一个时刻,你都能看到他从时域的一个点延展成了频域的一个面,你所能获取到的信息量将成倍增加,这有助于我们从中解析出更丰富的内容。因此,电磁频谱的观测,或者说使用频谱仪,我们实际上是换一…

  • 判断一个数是否为素数c#(判断一个数是否为素数的算法)

    C++判断一个数是否为素数算法C++判断一个数是否为素数算法完整源码(定义,实现,main函数测试)C++判断一个数是否为素数算法完整源码(定义,实现,main函数测试)#include<cassert>#include<iostream>template<typenameT>boolis_prime(Tnum){boolresult=true;if(num<=1){return0;

  • mybatis2级缓存_java二级缓存

    mybatis2级缓存_java二级缓存1.概述转载:MyBatis二级缓存全详解上一篇文章中我们介绍到了MyBatis一级缓存其实就是SqlSession级别的缓存,什么是SqlSession级别的缓存呢?一级缓存的本质是什么呢?以及一级缓存失效的原因?我希望你在看下文之前能够回想起来这些内容。MyBatis一级缓存最大的共享范围就是一个SqlSession内部,那么如果多个SqlSession需要共享缓存,则需要开启二级缓存,开启二级缓存后,会使用CachingExecutor装饰Executor,进入一.

  • NIO Reactor模型

    NIO Reactor模型NIOReactor模型Reactor三种模型单线程模型多线程模型主从多线程模型Netty线程模型1线程组2ChannelPipeline3异步非阻塞Reactor模式是基于事件驱动开发的,服务端程序处理传入多路请求,并将它们同步分派给请求对应的处理线程,Reactor模式也叫Dispatcher模式,即I/O多路复用统一监听事件,收到事件后分发(Dispatch给某进程),这是编写高性能网络服务器的必备技术之一。Reactor模式以NIO为底层支持,核心组成部分包括Reactor和Ha

  • visifire 使用备忘

    visifire 使用备忘//图表绑定辅助类publicclassChartValue:INotifyPropertyChanged{publicChartValue(){}publicChartValue(stringxlabel,decimalvalue){Label=xlabel;_yValue=value;}de…

  • 初识ABP vNext(11):聚合根、仓储、领域服务、应用服务、Blob存储

    初识ABP vNext(11):聚合根、仓储、领域服务、应用服务、Blob存储

    2020年11月20日

发表回复

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

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