vue中自定义事件

vue中自定义事件回调函数传参

万次阅读 2018-08-25 02:18:23

我们知道父子组件中，子组件一般是通过$emit(自定义事件名称，数据)的形式来将数据传给父组件父组件通过回调函数处理子组件传过来的数据，例如：子组件内： this.$emit(change,data) 父组件内 <...

我们知道父子组件中，子组件一般是通过$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原生事件，如何封装？——就是在原生事件的回调中发射...



 Vue的自定义事件
 子组件中，选择click或其他原生事件来封装
父组件中，使用v-on/@绑定事件监听器

 
自定义事件是自定义组件才有的。
 自定义事件其实就是封装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 event 自定义事件

万次阅读 2016-11-30 16:07:58

子组件要把数据传递给父级依靠自定义事件

子组件要把数据传递给父级 依靠自定义事件 
自定义事件 
 监听$on(eventName) 
   触发$emit(eventName) 
基本使用方法如下 
使用app.$on('text',function(){})来自定义一个事件，实例中我使用click点击事件来触发addn 中的 app.$emit('text')给事件传递参数'hi'; 
app.$on监听到text 执行打印  value
 


 

<body>
        <div id="app">
            <div @click="addn">{{pn}}</div>
        </div>
    </body>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                pn:10
            },
            methods:{
                addn:function(){
                     this.pn+=1;
                      this.$emit('text','hi');
                    }

            }
        });
        app.$on('text',function(value){
                        console.log(value);
                    })

    </script>

 


 
 

  
给予这个机制 父级组件就可以将父级组件的信息传递给自己组件 

<body>
        <div id="app">
            <div @click="addn">{{pn}}</div>
            <zhe></zhe>
        </div>
    </body>
    <script>
    Vue.component('zhe',{
            template:'<div v-on:click="myevent">{{mes}}</div>',
            data:function(){
                return {mes:1}
            },
            methods:{
                myevent:function(){
                    this.mes+=1;
                    app.$emit('example','zhe')
                }
            }
        });
        var app=new Vue({
            el:"#app",
            data:{
                pn:10
            },
            methods:{
                addn:function(){
                     this.pn+=1;
                      this.$emit('example','hi');
                    }
            }
        });
        app.$on('example',function(value){
                        console.log(value);
                    })

    </script>

 


 
 
上图为先点击<zhe></zhe>,在点击<div @click="addn">{{pn}}</div>执行结果 
这就实现了父级组件监听子级事件，通过事件可以将父级的数据传递给子集 

  
以$on(eventName)和$emit(eventName)配合使用时，须注意的是vue的事件运行类似浏览器的事件运行机制 
所有从可以使用浏览器的类似事件机制 

<body>
        <div id="app">
            <div @click="addn">{{pn}}</div>
            <zhe @myevent="addn(111)"></zhe>
            <zhe></zhe>
        </div>
    </body>
    <script>
    Vue.component('zhe',{
            template:'<div v-on:click="myevent">{{mes}}</div>',
            data:function(){
                return {mes:1}
            },
            methods:{
                myevent:function(){
                    this.mes+=1;
                    this.$emit('myevent')
                }
            }
        });
        var app=new Vue({
            el:"#app",
            data:{
                pn:10
            },
            methods:{
                addn:function(value){
                     this.pn+=1;
                     console.log(value);
                      this.$emit('example','hi');
                    }
            }
        });
        app.$on('example',function(value){
                        console.log(value);
                    })

    </script>通过将子级组件的触发函数绑定到父级的事件上
 
<zhe @myevent="addn(111)"></zhe>  可以理解为触 发父级组件事件的时候绑定了子集的方法函数addn() 
换成你熟悉的事件就是<div  v-on:click="addn(111)"></div> ; 
但是触发myevent 是<div v-on:click="myevent">{{mes}}</div>的click myevent方法中触发

收起

展开全文

component event

vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020-10-15 06:18:28
主要介绍了vue使用自定义事件的表单输入组件用法,结合实例形式详细分析了vue.js日期组件与货币组件相关操作技巧及注意事项,需要的朋友可以参考下
收起

Vue自定义事件

千次阅读 2019-06-25 20:26:57

这时，Vue的自定义事件就派上用场了。 1、自定义事件 每个Vue创建的实例都会出现一个事件接口 var vm = new Vue({ el: '#app' }) 自定义事件的定义(发布) //vm.$on(自定义事件的名称，自定义事件的事件处理...

父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。 
1、自定义事件 
每个Vue创建的实例都会出现一个事件接口 
 var vm = new Vue({
    el: '#app'
  })
 
自定义事件的定义(发布) 
 //vm.$on(自定义事件的名称，自定义事件的事件处理程序)
 vm.$on( 'aa', function () {
    console.log( 'aa' )
  })
  
 
//自定义事件的触发 （ 订阅 ） 
 // vm.$emit( 自定义事件的名称，自定义事件处理程序需要的参数1，参数2，参数3)

    vm.$emit( 'aa' )
 
2、自定义事件的数据传递 
我们通过下面代码分析一下自定义事件的数据传递 
<body>
   <div id="app">
      <Father></Father>
   </div>

   <template id="father">
      <div>
         <h3>这里是父组件</h3>
         <p>儿子给我{{ money}} </p>
         <Son @hongbao="givemoney"></Son>
      </div>

   </template>

   <template id="son">
      <div>
         <h3>这里是子组件</h3>
         <button @click="give">给父亲红包</button>
      </div>
   </template>
</body>

<script>
   Vue.component('Father',{
      template:'#father',
      data(){
         return {
            money:0,
         }
      },
      methods:{
          //自定义事件的定义(发布)
         givemoney(val){
            this.money=val;
         }
      }

   });

   Vue.component('Son',{
      template:'#son',
      data(){
        return {
           money:3000,
        }
      },
      methods:{
         //自定义事件的触发 （ 订阅 ）
         give(){
            console.log(this.money)
            this.$emit('hongbao',this.money)
         }
      }
   })

   new Vue({

   }).$mount('#app')

 
从上述代码可以看出，父组件通过$on监听事件，事件处理函数的参数则为接收的数据 
 methods:{
          //自定义事件的定义(发布)
         givemoney(val){
            this.money=val;
         }
      }
 
子组件通过$emit可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据 
  methods:{
         //自定义事件的触发 （ 订阅 ）
         give(){
            console.log(this.money)
            this.$emit('hongbao',this.money)
         }
      }

收起

展开全文

Vue里自定义事件触发不了事件@Aclick，关于自定义事件的规范
2019-10-20 12:58:53
特别注意事项，经我一个半小时的验证才发现 @Aclick 这样的自定义事件大写开头的永远是无效的，起码现在的Vue还不支持 @aclick 这样自定义事件以小写开头的才是语法允许的，大写开头是不可以的 ...
收起
Vue EventBus自定义组件事件传递
2020-08-27 07:59:04
主要介绍了Vue EventBus自定义组件事件传递，组件化应用构建是Vue的特点之一，本文主要介绍EventBus进行数据消息传递，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收起
Vue自定义事件(详解)
2020-12-10 19:54:33
本文将详细介绍Vue自定义事件 事件绑定每个 Vue 实例都实现了事件接口 (Events interface)，即使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API...
收起
vue 中自定义指令改变data中的值
2020-08-30 08:35:01
主要介绍了vue 中自定义指令改变data中的值,非常不错，具有参考借鉴价值，需要的朋友可以参考下
收起
vue自定义事件
2018-10-19 11:36:03
01 vue中自定义指令 vue指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 02 标准浏览器...
收起
Vue自定义事件解读
千次阅读 2017-09-07 11:42:43
Vue事件分两部分，一是DOM绑定事件，二是自定义事件。...Vue自定义事件是为组件间通信设计，自定义事件提供$on、$off、$once、$emit、$broadcast、$dispatch 几个 api,只是在2.0版本中，$broadcast、$dispa
收起
vue-自定义事件之—— 子组件修改父组件的值
千次阅读 2019-03-07 15:47:44
vue-自定义事件之—— 子组件修改父组件的值如何利用自定义的事件，在子组件中修改父组件里边的值？关键点记住：三个事件名字步骤如下：这里，相对本案例，父组件定义为Second-module，对应的子组件是Three-...
收起
Vue中自定义全局组件的实现方法
2020-10-18 22:34:12
两天学习了Vue.js 感觉组件这个地方知识点挺多的，而且很重要，所以这篇文章主要给大家介绍了关于Vue中自定义全局组件的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，...
收起
vue---vue中如何自定义事件？子组件事件如何向上触发父组件事件？
千次阅读 2017-09-04 11:10:27
vue的自定义事件非常有趣，大意为子组件使用了一个事件，比如click然后产生了一个效果，这样的效果便可以为自定义事件了。然后将这样的效果命名放入父组件中，当做一个事件来触发，每当这样的效果发生一次时，这样父...
收起
组件 emit
Vue组件之自定义事件
千次阅读 2019-05-10 15:56:25
本文将详细介绍Vue自定义事件 事件绑定　每个 Vue 实例都实现了事件接口 (Events interface)，即使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件　[注意]Vue 的事件系统分离自浏览器的...
收起
Vue中自定义标签及其使用
千次阅读 2020-07-20 18:14:20
Vue中自定义标签及其使用问题需求自定义创建组件的vue文件编辑组件使用导入申明使用使用整个代码效果问题我们在使用Vue开发移动端应用程序时，常常使用Vant Weapp中的组件库，但是我们想过它是怎么实现的吗？是否...
收起
从Node.js事件触发器到Vue自定义事件的深入讲解
2020-12-17 09:25:54
今天在看 Node.js 文档的时候讲到事件触发器，其中的 emit 方法让我想到了 Vue 中的自定义事件，借此我对 Vue 又有了新的理解，所以将我的理解记录下来，留作学习笔记。 Node.js中的事件触发器 Node.js 为我们提供了...
收起
Vue接口自定义数据操作与实现代码
2020-10-15 20:01:37
在Vue中自定义数据接口，配合仓库使用在Vue中自定义数据接口，配合仓库使用在Vue中自定义数据接口，配合仓库使用在Vue中自定义数据接口，配合仓库使用在Vue中自定义数据接口，配合仓库使用在Vue中自定义数据...
收起
vue中自定义触屏事件，点击、滑动、左滑、右滑、下滑、上滑、长按
千次阅读 2019-03-26 08:50:06
主要思路为，首先监听触屏事件touchstart这样可以获取...最后通过vue的自定义事件，将事件注册为全局的事件。、这样整个页面都可以使用触屏事件了。具体的代码为 function vueTouch(el,binding,type){//触屏函数 ...
收起
vue 自定义点击事件
千次阅读 2017-12-27 11:15:41
我们在项目开发中使用vue的时候发现vue内置的click事件在移动端使用会有300毫秒的点击延迟，所以我们就自己写了一个点击的自定义事件，希望对各位有所帮助，不足之处希望各位能够及时沟通。废话就不多说了，直接贴...
收起
函数
vue3.0自定义事件emit出现错误Custom event name ‘handleClick‘ must be kebab-case
千次阅读 2020-10-04 21:28:55
原因是自定义事件名称中含有大写的字母改为handleclick就可以了
收起
js
Vue组件之自定义事件的功能图解
2020-08-28 02:41:24
本文通过图文并茂的形式给大家介绍了Vue组件之自定义事件的功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
收起
vue 自定义事件传参
千次阅读 2020-02-29 00:03:05
先来简单看个例子： TodoList.vue : <template> <ul> <li> <todo-item v-for="item in list" :key="item.id" :status="doneList.includes(item.id)" :info="item" ...
收起
浅谈Vue 自定义事件——原理及用法
2020-05-12 14:14:49
在Vue 中，对HTML的原生事件做了支持。例如：click、focus、change等事件。除了原生事件外，Vue 还允许用户自定义事件。什么是事件？什么是自定义事件？在了解自定义事件前，先来了解什么是事件。
收起
Vue中自定义别名
千次阅读 2018-10-21 11:30:24
文章目录介绍使用在普通js中使用在css中使用疑问 ...但是在vue里面我们可以不这么做，在build/webpack.base.conf.js文件中可以修改，我们看到这个节点下已经有了文件配置了：这里我们自己加入了一个sty...
收起