首页 > 其他分享 >vue自定义事件的基本使用

vue自定义事件的基本使用

时间:2022-11-15 17:02:09浏览次数:64  
标签:vue 自定义 parent 事件 按钮 组件

因为新项目要写114个字段,所以今天试着封装了一个dialog表单组件

在优化关闭和提交按钮的时候,可以在父组件写事件,这时候自定义事件就能登场了

我先是这么操作了一番

父组件:

(在父组件上并没有任何的触发事件)

在created生命周期中写了$on,就像

最后在组件中传过去

这时候就在子组件中看看你哪个事件需要使用到父组件的handleCancel或另一个函数,这样写就行了

子组件:

(本来想用$parent的,不过再三考虑之后还是自定义事件解决吧,如果大佬看到这篇文章,希望可以帮我科普一下$parent的坏处,邮箱:[email protected]

然后就能在点击组件的取消、确定按钮时触发父组件的事件了

 

标签:vue,自定义,parent,事件,按钮,组件
From: https://www.cnblogs.com/zzy-newblog/p/16892990.html

相关文章

  • Flume 自定义拦截器
    ApacheFlume是一个分布式的、可靠和易用的日志收集系统,用于将大量日志数据从许多不同的源进行收集、聚合,最终移动到一个集中的数据中心进行存储。Flume的使用不仅仅限于......
  • Vue跨域解决方案
    跨域:什么是跨域?跨大家肯定都知道,从一边到另一边那么域是什么?通俗的说,域就是url、浏览器的请求地址的最开始的一部分......
  • VUEX的基本使用之加减案例
    组件count<template><divclass="count"><h2>当前求和为:{{$store.state.sum}}</h2><selectv-model.number="n"><option:value="1">1</option......
  • Vue3 —— 组件练习题(附源码)
    一、定义一个vue分页组件,实现客户端分页功能1.1、子组件A(页数按钮)<!--本组件用于遍历分页的页数按钮--><templatelang=""><divclass="btn-box"><!--......
  • vue创建项目、初始化项目
    vue创建项目、初始化项目、vue请求代理条件:@vue/cli5.0.4node/v14.0.0一、安装脚手架工具 @vue/clinpminstall-g@vue/clinpminstall-g@vue/[email protected]......
  • uniapp 实现小程序中自定义tabBar
    uniapp实现小程序中自定义tabBar的方法第一种方式:page.json中配置"tabBar":{"color":"#7A7E83","selectedColor":"#007AFF","borderStyle":"black",......
  • leaflet 加载高德地图自定义样式
    最近项目需求,需要使用leaflet封装成一个vue组件,涉及功能主要有高德自定义样式地图封装为leaflet底图图层、自定义坐标系、topjson省市区街道下钻、线面区域热力层、飞线、......
  • vue keepAlive 不缓存
    详情参考:https://blog.csdn.net/weixin_44813666/article/details/120737881<keep-alive:include="cachedViews"exclude="Index"><router-view:key="k......
  • umi配置chainWebpack,使用自定义loader----jsx-px2rem
    前言虽然云谦大佬在github上说了,umi本身的配置已经很完善了,但是肯定满足不了所有人各种各样的奇葩需求。。。比如今天说的将jsx中的style里,将px转换为rem。 umi本身提......
  • 12.事件
    概述on属性监听鼠标事件click,dblclick,mousedown,mouseup,mousemove键盘事件keydownkeypresskeyup进度事件abort,error,load,loadstart表单事件onsubmit,onbl......