精华内容
下载资源
问答
  • 2.在原生事件中,$event是事件对象,在自定义事件中,$event是传递过来的数据(参数) 如果遇到子组件向父组件传数据,需要用到自定义事件来处理,此时我们在父组件上监听那个自定义事件,并且需要接收子组件传过来...
    1.$event 是 vue 提供的特殊变量,用来表示原生的事件参数对象 event

    2.在原生事件中,$event是事件对象,在自定义事件中,$event是传递过来的数据(参数)

    如果遇到子组件向父组件传数据,需要用到自定义事件来处理,此时我们在父组件上监听那个自定义事件,并且需要接收子组件传过来的参数,同时我们自己还想传递一个参数给下面方法

     父组件

     

    父组件监听自定义事件的定义的方法

     

    此时上面的那个$event不再是原生的事件对象e,而是用来接收子组件传递过来的数据(参数)

    展开全文
  • 2.在原生事件中,$event是事件对象,在自定义事件中,$event是传递过来的数据(参数) 2.1在自定义事件中,$event是传递过来的数据 原生vue里的$event <tempalte> <button @click = “getEvent($...

    1.$event 是 vue 提供的特殊变量,用来表示原生的事件参数对象 event

    1.1在原生事件中,$event是事件对象 可以点出来属性 

    2.在原生事件中,$event是事件对象,在自定义事件中,$event是传递过来的数据(参数)

    2.1在自定义事件中,$event是传递过来的数据

    原生vue里的$event

    
    <tempalte>
       <button @click = “getEvent($event)”>点击</button>
    </template>
    <script>
       export default {
          methods:{
             getEvent(e) {
                console.log(e)
                // e.target 是你当前点击的元素
                // e.currentTarget 是你绑定事件的元素
               #获得点击元素的前一个元素
               e.currentTarget.previousElementSibling.innerHTML
               #获得点击元素的第一个子元素
               e.currentTarget.firstElementChild
               # 获得点击元素的下一个元素
               e.currentTarget.nextElementSibling
               # 获得点击元素中id为string的元素
               e.currentTarget.getElementById("string")
               # 获得点击元素的string属性
               e.currentTarget.getAttributeNode('string')
               # 获得点击元素的父级元素
               e.currentTarget.parentElement
               # 获得点击元素的前一个元素的第一个子元素的HTML值
               e.currentTarget.previousElementSibling.firstElementChild.innerHTML
             },
          }
       }
    </script>
    

    自定义事件里的$event

    子组件 传值
    
    export default {
        methods: {
            customEvent() {
                this.$emit( custom-event ,   value )
            }
        }
    }
    
    
    父组件 
    接收自定义事件
    <template>
        <div>
            <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)">
                </my-list>
        </div>
    </template>
    
    
    接收$event
    export default {
        methods: {
                               e就是接收过来的$event 现在他就是子组件传过来的值 不再是 对象事件 
            customEvent(index, e) {
                console.log(e) //  some value
            }
        }
    }

    展开全文
  • 自定义事件:子组件在父组件使用时,直接绑定在子组件上的事件就是自定义事件,必须经过子组件的触发vm.$emit()才能执行 原生事件:直接在子组件里的模板上绑定的事件,子组件引入后是可以直接触发的 当我们给一个...

    自定义事件:子组件在父组件中使用时,直接绑定在子组件上的事件就是自定义事件,必须经过子组件的触发vm.$emit()才能执行
    原生事件:直接在子组件里的模板上绑定的事件,子组件引入后是可以直接触发的

    当我们给一个组件绑定一个事件的时候时候,我们绑定是一个自定义事件,而这个时候我们去点击的时候并不能直接触发这个事件,因为在组件内部并没有去emit(‘click’)这个事件。

    <template>
    	<div id="app">
    		<child-component @click="handleClick"></child-component>
    	</div>
    </template>
    <script>
    import 'ChildComponent' from './ChildComponent'
    export default {
    	name: '',
    	components: {ChildComponent},
    	data() {
    		return {}
    	},
    	methods: {
    		// 这里调用是不会触发click事件的,因为是自定义事件,不是原生的dom事件
    		handleClick() {
    			console.log('trigger click')
    		}
    	}
    }
    </script>
    

    如果想触发自定义的click事件,就得在子组件里对元素进行事件绑定,这个触发的才是原生的Dom事件。

    在dom元素上绑定的事件,触发的是dom的原生事件
    在组件上绑定的事件,触发的是自定义事件,需要用this.$emit(‘eventName’)来触发。

    Vue.component('child-component', {
    	// 组件模板自身的事件是原生dom事件,点击可以直接触发
    	template: '<div @click="handleChildClick"></div>',
    	methods: {
    		handleChildClick() {
    			console.log('触发的是dom原生事件')
    			this.$emit('click', param)
    		}
    	}
    })
    

    而如果我们想直接触发绑定的自定义事件,怎么办呢?可以这样:使用vue为我们提供的事件修饰符:.native, 即:

    <template>
    	<div id="app">
    		<child-component @click.native="handleClick"></child-component>
    	</div>
    </template>
    <script>
    import 'ChildComponent' from './ChildComponent'
    export default {
    	name: '',
    	components: {ChildComponent},
    	data() {
    		return {}
    	},
    	methods: {
    		// 在自定义事件上添加.native修饰符后,我们就可以直接触发click事件了
    		handleClick() {
    			console.log('trigger click')
    		}
    	}
    }
    </script>
    
    展开全文
  • Vue中我们可以使用下面的代码来实现组件中自定义事件的监听和分发: //在父组件 mounted () { //给Header组件添加addTodo事件,通过$on监听 this.$on('addTodo', this.addTodo) } methods: { addTodo (todo)...

    自定义全局事件总线

    事件监听和组件传值方式

    在Vue中我们可以使用下面的代码来实现组件中自定义事件的监听和分发:

    //在父组件中
    mounted () {
    	//给Header组件添加addTodo事件,通过$on监听
    	 this.$on('addTodo', this.addTodo)
    }
    methods: {
          addTodo (todo) {
            this.todos.unshift(todo)
          },
    }
    
    //Header组件中
    methods: {
          add () {
          	...
          	//分发事件,并且传入数据
          	this.$emit('addTodo', todo)
          	...
          }
    }
    //在子组件中调用add方法就会触发事件分发,那么父组件就会监听到,就能够执行addTodo方法
    

    以上就是我们熟悉的用法。这里我们可以讨论两个问题:

    • 通过 on 和eimt能否实现兄弟组件之间的传值?
    • 如何自己实现事件监听、分发和移除呢?

    首先、on 和 emit不能直接实现兄弟组件之间传值。
    一般兄弟组件之间传值有多种方式,我使用过的方式有三种:
    1.通过子组件传递给父组件,然后通过父组件传递给另外一个组件
    这种你很简单应该都会吧
    2.通过eventBus的方式
    单独建立一个eventBus.js文件,内如如下:

    	import Vue from 'vue'
    	export default new Vue
    

    假如父组件如下:

    <template>
         <cpn-a></cpn-a>
         <cpn-b></cpn-b>
    </template>
    

    子组件cpn-a

    <template>
         <div class="cpn-a">
             <div>{{btext}}</div>
         </div>
    </template>
    <script>
    import eventBus from './event.js'
    export default {
       name: 'cpn-a',
       data () {
            return {
               'btext':"我是a组件内容"
            }
       },
       created:function(){
           this.bbtn();
       },
       methods:{
           bbtn:function(){
                eventBus .$on("myFun",(message)=>{  
                //注意这里应该使用箭头函数 否侧this指向有问题
                     this.btext = message      
                })
           }
        }
    }
    </script>
    

    子组件cpn-b

    <template>
          <div class="cpn-b">
               <button @click="abtn">A按钮</button>
          </div>
    </template>
    <script>
    import eventBus from './event.js'
    export default {
          name: 'cpn-b',
          data () {
            return {
                    ‘msg':"我是组件b"
            }
          },
          methods:{
               abtn:function(){
                       eventBus.$emit("myFun",this.msg)   //$emit这个方法会触发一个事件
               }
          }
    }
    </script>
    

    3.使用PubSub.js库
    这种方式和第二种差不多,只不过使用的是第三方的库,就不写代码演示了,大家可以去找官方网站案例。

    探讨如何自定义全局事件总线

    上面第二种方式为什么能够实现兄弟组件之间的传值呢?
    首先,我们需要知道一个vue组件是谁的实例对象。是Vue的实例对象吗?
    我们在一个组件中将this打印输出看一下:
    在这里插入图片描述
    通过输出信息我们可以看出来,vue组件并非是Vue的实例对象,而是VueComponent实例对象,另外,我们还发现了一件有趣的事情:
    在这里插入图片描述
    VueComponent实例对象的隐士原型对象指向了Vue实例对象。而我们知道Vue实例对象的隐式原型对象上有on和emit方法。那么这两个方法就可以实现事件的监听和分发。
    画个图来理一下父子组件之间的关系:
    在这里插入图片描述
    因为每个组件都会创建属于自己的VueComponent实例对象,所以兄弟组件之间是不能通过on emit方法进行事件监听和分发的,父子组件可以使用的原因是,父组件中包含了子组件,可以通过名称遍历到子组件实例,然后找到对应的事件方法,而兄弟组件之间是没有包含关系的所有不能直接使用on 和emit方法。

    那么,有什么办法可以让on和emit方法在全局实现事件监听和分发呢?

    通过上面的第二种方式,即通过eventBus的方式来实现兄弟组件之间传值。这个文件返回了一个Vue构造函数的实例对象,而Vue构造函数的实例对象是可以用使用到Vue原型上的方法的,也就是可以使用到on和emit方法,从而巧妙的将这些方法的实例统一成一个,也就是说你在每个组件中使用的on和emit方法都是这一个实例对象下面的,保证了完整性,从而可以实现兄弟组件之间的传值。

    我感觉这个方式要多创建一个文件,其实比较麻烦,能不能也使用this这种方式直接使用呢?
    有的,我们可以直接在main.js中给Vue的原型上挂载一个公共方法

    new Vue({
      beforeCreate () {
      //我们可以给Vue的原型上添加一个属性$globalEventBus
      //让这个属性等于Vue的实例对象
        Vue.prototype.$globalEventBus = this
      },
    
      components: {
        App
      },
      template: '<App/>'
    }).$mount('#app')
    

    使用方式:
    在子组件中就可以使用

    methods:{
    	this.$globalEventBus.emit('addTodo',todos)
    }
    

    那么,其实这些方式的实现都跟原型链有关,只要原型链掌握的好,理解起来很轻松。

    各位好哥哥好姐姐,点个赞吧

    展开全文
  • Vue-自定义事件

    2021-11-25 15:37:37
    自定义事件: 执行流程:首先在todo-items里边写一个删除的方法,在这个方法里边通过使用this.$emit('remove',index);和v-on:remove="removeItem(index)"联系起来,因为remove绑定的方法是removeItem(index),所以当...
  • 我们在vue中用的click、keyup……等事件,这些属于内置事件,也就是js自带的事件。 问题一:什么是组件自定义事件呢? 自定义事件,顾名思义就是自己打造的事件,包含事件名,事件回调等,定义好之后去给组件使用...
  • 发布订阅模式和观察者模式 发布/订阅模式 发布/订阅模式 订阅者 ...Vue中自定义事件、Node事件机制都是基于发布/订阅模式的。 Vue自定义事件 ·- 通过$on注册事件,在特定的时间通过$em
  • 自定义事件:子组件在父组件使用时,直接绑定在子组件上的事件就是自定义事件,必须经过子组件的触发才能执行 原生事件:直接在子组件里的模板上绑定的事件,子组件引入后是可以直接使用的 怎么在父组件的子组件里...
  • 模板编译 processAttrs对于ast attributes处理(v-on/@)利用onRE与dirRE来捕获事件这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称,如@[prop],prop为data的值。不过通常都是一个静态的事件...
  • Vue 组件通信 - 子传父(自定义事件) 子传父步骤: 在子组件的 data 里面定义好 要传递的数据 在子组件的模版里面正常使用 该数据 (一般是通过一定的动作,如点击,滑动等,来自定义事件向父组件传递,...
  • 父组件: <div> <!-- <val v-on:chang="demo"></val> --> <!-- 简写 -->...-- 通过ref传事件 灵活性更高 --> <val ref="valref"></val> </div>
  • 1、this.$off('a') // 解绑一个事件 2、this.$off(['a','b']) // 同时解绑a 和 b两个事件 3、this.$off() 解绑所有事件
  • vue 自定义事件 解绑

    2021-07-24 00:15:38
    既然不用的话就解绑 对于绑的谁就去谁那进行...当时在生命周期销毁的时候,说绿色框时,原生的dom事件能用,因为此时,只销毁了自定义事件也就是这边说的移除事件监听并不是移除原生事的监听而是自定义事件 销毁后,组..
  • vue自定义事件解析

    2021-03-02 10:38:35
    结合菜鸟教程-vue组件的一个例子来说明一下自定义事件的运行流程 <div id="app"> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment=...
  • vue3.0--自定义事件

    2021-04-27 20:04:47
    一、定义自定义事件 可以通过 emits 选项在组件上定义已发出的事件。 Home.vue <div id="Home"> Home <!-- 给子组件添加自定义事件 --> <v-A title="A子组件" v-model:val="info" data-index="2" ...
  • 一、自定义事件 打开官网:https://v3.cn.vuejs.org/guide/component-custom-events.html 这个自定义事件其实也是为了做方法传递的。这里我们修改一下上一个例子。 二、修改父子组件 首先我们来根据官方文档的...
  • 自定义事件传参问题

    2021-01-16 18:31:02
    What problem does this feature solve?在组件内部发射的事件并且有参数传递出来的时候,如果在业务...就会覆盖掉默认的event对象参数一样,必须要显示地传入$event,很神奇的是,在自定义事件这里,也可以传入$even...
  • 在此作为一个记录,和vue2不同的是,在vue3中自定义指令的钩子函数都做了改变,为了和组件的生命周期函数一致,将vue2的所有钩子函数都做了替换
  • vue:组件自定义事件、绑定、解绑事件 自定义组件绑定事件: 使用方法:在引入组件的methods定义一个回调方法,在组件标签使用如下两种方式自定义事件,去到引入的组件的,使用 this.$emit("eventName",this....
  • vue -- 自定义事件

    2021-10-07 21:35:18
    文章目录自定义事件自定义 -- 组件事件删除vue实例数据1、在vue实例添加删除数组todoItems数据的方法`todoItems` -- 根据传入下标2、在组件添加按钮触发remove,定义组件remove方法并绑定事件补充:事件名大小...
  • Vue——自定义事件

    2021-01-12 16:28:29
    ​ 由于Vue中的其他组件无法使用到Vue实例的数据,可以通过自定义事件完成对Vue实例数据的一些操作,具体图解如下: 其中,由于Vue中具有的数据双向绑定的特性,使得前端可以作为组件与实例的桥梁,利用自定义...
  • vue3组件自定义事件

    2021-05-04 17:46:28
    vue3组件发送的自定义事件需要定义在emits选项 emits.vue <template> <div @click="$emit('my-click')"></div> </template> <script> export default { // 这里一定要注册,...
  • vue传值(自定义事件、属性、EventBus)
  • vue3之自定义事件自定义修饰符 官方建议我们组件发送自定义事件的时候,先在组件里面定义一下 父组件 // 父组件 <template> <div> <child v-model="text" v-model:name="name" /> </div&...
  • 当子组件需要和父级组件进行通信,可以派发并监听自定义事件。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
  • 组件自定义事件 子组件给父组件传参 通过父组件给子组件传递函数类型的prop 父组件提前准备一个函数,传给子组件,子组件调用函数 父组件 <template> <div id="app"> <School :getSchoolName=...
  • vue 自定义事件 v-model

    2021-10-21 17:54:54
    看完官网API的介绍,想必是有点懵的,我们可以从v-mode的语法糖来一步一步的理解。 v-mode语法糖: v-model实现了表单输入的双向绑定。...// .vue文件 export default { data(){ return { name: '', } } }..
  • //自定义事件指令,点击需要判断登录的指令 ,使用方法在标签上加 v-clickWithAuthLogin = 'xxx' Vue.directive('clickWithAuthLogin', { bind: function (el, binding, vnode) { el.onclick = async function ...
  • vue官网上面有个在线模板编译 当我们给模板上的自定义事件添加额外参数的时候,我们的绑定函数就会被包裹上一层代码,function($event){xxx} 上述函数在子组件emit的时候被调用,可以理解为 var dealName = ...
  • VUE-props-自定义事件

    2021-03-13 16:03:41
    兄弟组件间也不能直接 props 通信,必须借助父组件才可以 二、自定义事件 添加</button> 数据在哪个组件,更新数据的行为(方法)就应定义在哪个组件。 当前数据在App组件: App.vue在定义addComments添加 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 157,848
精华内容 63,139
关键字:

vue中自定义事件

vue 订阅