精华内容
下载资源
问答
  • 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中自定义事件回调函数传参

    万次阅读 2018-08-25 02:18:23
    我们知道父子组件,子组件一般是通过$emit(自定义事件名称,数据)的形式来将数据传给父组件 父组件通过回调函数处理子组件传过来的数据, 例如: 子组件内: this.$emit(change,data) 父组件内 &lt;...

    我们知道父子组件中,子组件一般是通过$emit(自定义事件名称,数据)的形式来将数据传给父组件

    父组件通过回调函数处理子组件传过来的数据,

    例如:

    子组件内:

    this.$emit(change,data)

    父组件内

    <json-editor @change="onSettingChange" ></json-editor>

    我们都知道子组件会将数据自动作为参数传给父组件的回调函数:例如父组件我们会这样写

    <json-editor @change="onSettingChange()"></json-editor>

    在父组件的方法内写:

    onSettingChange:function (data){

    //处理子组件传来的数据

     }

    可是如果我们想在回调函数传其他的参数值怎么传呢?

    有一个方法就是:

    <json-editor @change="onSettingChange(arg,arguments)"></json-editor>

    这样子组件传来的参数值可以通过arguments这个数组读取,多余的参数则按照一般的方式传值即可:

    onSettingChange:function (arg,data){

    里面的arg是一般的传值,

    data[0]里面是子组件传过来的数据

     }

    展开全文
  • Vue自定义事件

    2020-10-30 23:06:07
    Vue自定义事件子组件,选择click或其他原生事件来封装父组件,使用v-on/@绑定事件监听器 自定义事件是自定义组件才有的。 自定义事件其实就是封装DOM原生事件,如何封装?——就是在原生事件的回调发射...

    自定义事件是自定义组件才有的。
    自定义事件其实就是封装DOM原生事件,如何封装?——就是在原生事件的回调中发射(emit)一个自定义事件。
    下面就是具体操作:

    子组件中,选择click或其他原生事件来封装

    // 自定义组件boringButton.vue

    <template>
        <button v-on:click="incrementHandler">{{ counter }}</button>
    </template>
    <script>
        export default {
            name: 'boring-button',
            methods: {
                incrementHandler: function () {
                    this.counter += 1;
                   this.$emit('increment');
                }
            }
        }
    </script>
    

    父组件中,使用v-on/@绑定事件监听器

    // 引用boringButton.vue的文件

    <template>
        <!-- 注意increment的大小写和emit的保持一致,要一毛一样才行 -->
        <boringButton @increment='incrementTotal'></boringButton>
    </template>
    
    <script>
        methods: {
            incrementTotal: function () {
                console.log('I increment the boringButton!');
            }
       }
    </script>
    
    展开全文
  • Vue——自定义事件

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

    Vue——自定义事件

    ​ 由于Vue中的其他组件无法使用到Vue实例中的数据,可以通过自定义事件完成对Vue实例中数据的一些操作,具体图解如下:

    在这里插入图片描述

    其中,由于Vue中具有的数据双向绑定的特性,使得前端可以作为组件与实例的桥梁,利用自定义事件实现一些功能。

    示例代码:

    //前端
    <div id="app" >
        <todo>
            <todo-title slot="todo-title" :title="title"></todo-title>
            <todo-items slot="todo-items" v-for="(item,index) in items" :item="item"
           :index="index" :key="index" v-on:remove="removeItems(index)"></todo-items>
        </todo>
    </div>
    
    //Vue
    <!--导入Vue-->
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script type="text/javascript">
    
        //slot:插槽
        Vue.component("todo",{
            template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                        <slot name="todo-items"></slot>\
                        </ul>\
                        </div>'
        });
        Vue.component("todo-title",{
            props:['title'],
            template: '<div>{{title}}</div>'
        });
        Vue.component("todo-items",{
            props: ['item','index'],
            //记得button绑定事件
            template:'<li>{{index}}---{{item}}<button @click="remove">删除</button></li>',
            methods:{
                remove:function(index){
                    this.$emit('remove',index);
        }
            }
        });
        var vm = new Vue({
            el:'#app',
            data: {
                title: "书籍列表",
                items:['Java','Math','English']
                    },
            //methods不要放进data里!!
            methods: {
                removeItems:function (index){
                    console.log("删除了"+this.items[index]);
                    this.items.splice(index,1);
                }
            }
        });
    </script>
    
    

    关于V-bind key="":

    }
        }
    });
    
    
    **关于V-bind key="":**
    
    >一句话,**key的作用主要是为了高效的更新虚拟DOM**。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们。
    
    展开全文
  • vue自定义事件

    2017-03-21 10:47:00
    vue自定义事件非常有趣,大意为子组件使用了一个事件,比如click然后产生了一个效果,这样的效果便可以为自定义事件了。然后将这样的效果命名放入父组件,当做一个事件来触发,每当这样的效果发生一次时,这样父...
  • vue——自定义事件

    2019-08-28 23:28:12
    vue中自定义事件,不同于组件和props属性,事件名没有任何的大小写转换,触发的事件必须完全匹配这个事件所用的名称,所以在使用this.$emit('clickA',data)时,clickA必须与定义的事件名一致 当参数为对象时,父...
  • vue 1.0自定义事件

    2019-01-02 14:09:46
    Vue实例实现了一个自定义事件接口,用于在组件树通信,这个事件系统独立于原生DOM事件。 使用 $on() 监听事件 使用 $emit()在它上面触发事件 使用 $dispatch()派发事件事件沿着父链冒泡 使用 $broadcast...
  • vue event 自定义事件

    千次阅读 2018-05-10 15:07:37
    子组件要把数据传递给父级 依靠自定义事件 自定义事件 监听$on(eventName) 触发$emit(eventName) 基本使用方法如下 使用app.$on('text',function(){})来自定义一个事件,实例我使用click点击事件来触发addn...
  • 我们提到过,不能在子组件直接修改父组件传来的 prop 数据。 如果想要修改父组件的原数据要...给子组件 Article.vue 绑定自定义事件: 在 App.vue 中用 v-on:upVote=“handleLikes(article)” 给 Article.vue ...
  • 自定义事件也可以用来创建自定义的表单输入组件,使用 v-model来进行数据双向绑定。牢记: <input v-model="something"> 仅仅是一个语法糖: <input v-bind:value="something" v-on:input="something = $...
  • 本文实例讲述了vue使用自定义事件的表单输入组件用法。分享给大家供大家参考,具体如下: 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。 v-model的实现原理 : <input v-model...
  • vue自定义事件

    2018-10-19 11:36:03
    01 vue中自定义指令 vue指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 02 标准浏览器...
  • vue-自定义事件之—— 子组件修改父组件的值 如何利用自定义的事件,在子组件修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-...
  • 自定义了一个标签menu_item ``` Vue.component('menu_item',{ props:['todo'], //template:'()">{{todo.text}}</li>', template:'()">{{todo.text}}</li>', }) var menu = new Vue({ el:"#vue_...
  • vue2自定义事件之$emit

    2017-04-25 16:58:00
    父组件: API上的解释不多: ... vm.$emit( event, […args] ) ...触发当前实例上的事件。附加参数都会传给监听器回调。 Source 我们可以从组件的api查看这个用法。 数据在组件是单向...
  • Vue 自定义事件

    2019-06-02 21:43:10
    前面的话 我们已经知道,从父组件...当子组件需要向父组件传递数据时,就要用到自定义事件。v-on指令除了监听DOM事件外,还可以用于组件之间的自定义事件。 在JS的设计模式—观察者模式有dispatchEvent和addEventL...
  • Vue自定义事件

    2019-08-28 11:09:18
    本博客记录了小编在学习Vue过程的体会与感悟,简单来说就是小编的学习笔记,学习地址主要为Vue的官网,官网地址为:《Vue官方文档》。相关学习笔记会记录在我的博客专栏《前端Vue,欢迎大家关注~ 一、事件名 ...
  • 在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bus = new Vue() // 触发组件 A 事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子监听事件 bus.$on('id-selected', function (id) {...
  • Vue自定义事件解读

    千次阅读 2017-09-07 11:42:43
    Vue中可通过v-on指令或事件语法糖@来为DOM元素绑定事件     二.自定义事件 Vue自定义事件是为组件间通信设计,自定义事件提供$on、$off、$once、$emit、$broadcast、$dispatch 几个 api,只是在2.0版本中,$...
  • 模板编译 processAttrs对于ast attributes处理(v-on/@)利用onRE与dirRE来捕获事件这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称,如@[prop],prop为data中的值。不过通常都是一个静态的事件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,524
精华内容 609
关键字:

vue中自定义事件

vue 订阅