Vue-组件自定义事件-绑定-解绑

最新推荐文章于 2024-04-19 18:32:11 发布
最新推荐文章于 2024-04-19 18:32:11 发布
阅读量1.4k 收藏
点赞数
分类专栏： Vue 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_67801847/article/details/126297081
版权

1.子给父：

        第一种：通过函数式，在夫中给子标签传入一个函数式，并在父的methods中创建，然后在子函数中接受，并再创建methods在子中调用。

        第二种：通过组件自定义事件。在app.vue给子标签绑定事件（v-on:自定义名称）,然后在子组件中通过函数调用        this.$emit('自定义名称',传参)

        第三种：通过ref属性绑定，然后在钩子函数中调用(更加灵活)

                        this.refs.组件名称.$on('自定义事件',回调函数)

 

 二：解绑:

                       第一种： this.$off('自定义名称')

                        第二种：this.$off(【】)   (适用于解绑多个)   /    this.$off()   所有全部解绑

                        第三种：销毁vc this.$destroy

三：总结

 

玛卡巴咖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用ref绑定元素
小黄呀呀呀的博客
07-05 5394
原生js获取DOM元素是很麻烦的，需要用如：document.getElementById这么长的API来获取，于是jQuery应运而生，$(“#id”)的使用使我们的操作变得简便起来。但是jQuery仅仅是库（插件），不能够用来搭建框架。于是vue可以帮我们解决这个问题，vue也有自带的获取DOM的方法，那就是ref。它不仅可以获取DOM元素还可以获取组件。1、给dom节点记上ref属性，可以理解为给dom节点起了个名字。2、加上ref之后，在$refs属性中多了这个元素的引用。3、通过vue实例的$re
vue中ref的动态绑定与获取
djh052900的博客
03-24 4673
在v-for循环中绑定ref,使用时获取某个具体的dom
Vue之事件绑定（初识Vue事件）
最新发布
百赢出品，必属精品
04-19 1382
Vue 的事件绑定是指通过 Vue 提供的v-on指令来监听 DOM 事件，当特定事件被触发时执行相应的方法或表达式。事件绑定在 Vue 中是一种重要的交互机制，它使得开发者可以轻松地响应用户的交互行为，并进行相应的逻辑处理。当在 Vue 中使用事件绑定时，通常会使用v-on或简写形式来监听 DOM 事件，并在触发事件时执行相应的方法。监听事件：使用v-on指令来监听 DOM 事件，语法为v-on:event，其中event是要监听的事件名，例如clickmouseover等。也可以使用简写形式。
vue中的事件绑定
ead_gbe的博客
06-27 5384
按钮1</button><button class="btn" v-on:click = "showInfo2(66)">按钮2
Vue-绑定自定义事件
Laollaoaolao的博客
09-08 971
1.定义 ​ 1.一种组件间通信的方式，适用于： 子组件===>父组件 ​ 2.使用场景:A是父组件，B是子组件，B想给A传递数据，那么就给在A中给B绑定自定义事件(事件的回调在A中) ​ 3.绑定自定义事件: ​ 1.方式一 ​ 在父组件中： <School @getSchoolName="getSchoolName" /> 或者 <School v-on:getSchoolName="getSchoolName" /> ​ 2.方式二 在父组件中定义ref
[vue] Vue组件绑定自定义事件 子传父（props this.$emit()，this.$ref） 解绑自定义事件 this.$off this.$destroy()
qq_14993591的博客
11-08 1463
基础代码 School.vue <template> <div class="school"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </template> <script> export default { name:'School', data() { return { na
vue自定义指令实现v-tap插件
09-01
总结，`v-tap`插件的实现充分利用了Vue的自定义指令系统，通过监听`touchstart`和`touchend`事件，实现了对移动端点击事件的模拟。这种自定义指令的实现方式，不仅简化了手势处理的复杂性，还使得代码更易于维护和...
vue.js自定义组件directives的实例代码
10-17
5. **unbind**: 指令与元素解绑时调用，通常用于清理资源或解除事件监听。 除了元素（`el`）之外，钩子函数还可以接收到其他参数，例如 `binding` 对象。`binding` 包含了关于指令的所有信息，如名字（`name`）、值...
详解vue中v-bind:style效果的自定义指令
10-15
总结来说，Vue中的`v-bind:style`结合自定义指令，可以实现更灵活的样式绑定和动态更新。自定义指令的生命周期钩子函数提供了一种方式，让我们能在不同阶段对DOM进行精确控制，适应各种复杂场景。在实际开发中，...
vueplugins一些vue插件包括自定义指令元指令
08-12
元指令通常会影响Vue组件的渲染流程。例如： - **`v-if`**：条件渲染，只有当表达式为真时才会渲染元素及其子元素。 - **`v-for`**：用于循环渲染列表，可以遍历数组或对象。 - **`v-model`**：双向数据绑定，用于...
详解Vue.directive 自定义指令
10-17
通过自定义指令，开发者可以实现更复杂的交互逻辑，如响应式地改变元素样式、监听事件、动画效果等，极大地增强了 Vue 的灵活性和可扩展性。这使得 Vue 在实际项目中能够更好地适应各种需求，提供了丰富的定制化方案...
通过vue手动封装on、emit、off的代码详解
12-12
一、概念 1. $on(“事件名称”，回调函数) 事件绑定，一个事件名称上面可能绑定多个函数 2. $emit(“事件名称”，需要传递的值) 事件触发时，会触发当前事件身上所有的函数 3. $off(“事件名称”，[需要解绑的函数]) 事件解绑时，若指定解绑函数则只解绑相应函数，否则解绑全部 二、手动封装on，emit，off事件在vue中的作用 |  在vue中进行非父子组件传值时，我们可以通过在vue的原型上添加一个公共的vue实例，组件之间调用这个公共实例的$on/$emit来传递数据，传递的一方调用$emit，接收的一方调用$on。 Vue.prototype.Observer = n
vue中$refs, $emit, $on, $once, $off的使用详解
12-29
1.$refs的使用场景 父组件调用子组件的方法，可以传递数据。 父组件： <div id=app> <child ref=child></child> <button @click=getMyEvent>点击父组件</button> <div> [removed] import ChildA from './child.vue' export default{ components:{ ChildA }, data(){ return { msg:'我是父组件的数据' }
关于vue h函数的使用
statfly的博客
07-26 4697
vue h函数 绑定事件
十、【VUE-CLI】组件的自定义事件（待办事项案例 · 第三版）
天行健，君子以自强不息
08-04 214
组件的自定义事件
Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点
LuckyBrown的博客
03-29 358
<template> <div id="app"> <h1>{{ msg }}</h1> <input type="text" v-model="msg" /> <button v-on:click="getMsg()">获取表单里面的数据</button> <but...
VUE之组件（绑定原生事件、$listeners、$ref）
lihua130427的博客
10-30 2314
组件绑定原生事件 一个组件的根元素上直接监听一个原生事件代码如下 <!-- html代码 --> <div id="demo"> <btn @click="show"></btn> </div> // vue代码 Vue.component('btn', { template: `<div> &...
vue created 调用方法_vue生命周期
weixin_40001519的博客
11-21 1782
先上一张图分析：vue的生命周期是什么呢？在vue的创建，使用，销毁过程中，会有许多事件，这些事件就被统称为生命周期函数，也叫作生命周期钩子。它包括：beforeCreat，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed这些。首先，我们可以进行一下分类：创建期间生命周期函数：beforeCreat，c...
vue2父组件解绑自定义事件
07-11
在Vue 2中，要解绑父组件上的自定义事件，可以使用`$off`方法。以下是解绑自定义事件的步骤： 1. 在父组件中，首先需要给子组件绑定自定义事件。例如，假设自定义事件是`myEvent`，可以在子组件中使用`$emit`方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值