Vue子组件传自定义事件给父组件
创始人
2024-04-12 16:16:25
0

我们知道组件之间是不能够进行通信的,都是相互独立的,你用不了我的状态和方法,我也用不了你的,那如何实现通信呢,可以间接实现;

实现父组件和子组件的通信:

  • 子组件想用父组件的状态需要父组件通过自定义属性传给子组件,然后子组件接收再使用;
  • 子组件想把状态传给父组件需要通过子组件通过自定义事件来实现;
  • 所以就有父传子靠属性,子传父靠事件;

子组件想用父组件状态,传自定义属性:

结果:

子组件传给父组件自定义事件:

在子组件身上绑定一个自定义事件;

  • 这个事件“event”在子组件里定义和触发;
this.$emit("event",10000)//emit是固定的方法,发布、发表的意思
  • 第一个参数就是自定义的事件,第二个参数是要传给父组件的参数;
  • this在子组件里用指的就是该子组件; 
  • 子组件触发当前自定义事件,然后这个事件触发父组件里定义的函数;
  • 这个事件是传给父组件的,所以这个函数在父组件中定义; 
    new Vue({el: "#box",methods:{handleEvent(data){console.log("父组件定义",data)}}})
  • 这个函数里的data是用来接收子组件传过来的参数的,就是10000;
  • 当然这个data接收过来数据以后,因为data是临时变量,父组件不能直接拿来用,如果想用,就自己定义一个状态来存储它,如下代码:
    new Vue({el: "#box",data:{filmData:""},methods:{handleEvent(data){console.log("父组件定义",data)this.filmData=data}}})

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...