精华内容
下载资源
问答
  • 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原生事件,如何封装?——就是在原生事件的回调发射...

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

    展开全文
  • 主要介绍了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)
             }
          }
    
    展开全文
  • 特别注意事项,经我一个半小时的验证才发现 @Aclick 这样的自定义事件大写开头的永远是无效的,起码现在的Vue还不支持 @aclick 这样自定义事件以小写开头的才是语法允许的,大写开头是不可以的 ...
  • 主要介绍了Vue EventBus自定义组件事件传递,组件化应用构建是Vue的特点之一,本文主要介绍EventBus进行数据消息传递 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue自定义事件(详解)

    2020-12-10 19:54:33
    本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface),即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API...
  • 主要介绍了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-自定义事件之—— 子组件修改父组件的值 如何利用自定义事件,在子组件修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-...
  • 两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以这篇文章主要给大家介绍了关于Vue中自定义全局组件的实现方法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,...
  • vue自定义事件非常有趣,大意为子组件使用了一个事件,比如click然后产生了一个效果,这样的效果便可以为自定义事件了。然后将这样的效果命名放入父组件,当做一个事件来触发,每当这样的效果发生一次时,这样父...
  • 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 文档的时候讲到事件触发器,其中的 emit 方法让我想到了 Vue 自定义事件,借此我对 Vue 又有了新的理解,所以将我的理解记录下来,留作学习笔记。 Node.js事件触发器 Node.js 为我们提供了...
  • Vue中自定义数据接口,配合仓库使用 在Vue中自定义数据接口,配合仓库使用 在Vue中自定义数据接口,配合仓库使用 在Vue中自定义数据接口,配合仓库使用 在Vue中自定义数据接口,配合仓库使用 在Vue中自定义数据...
  • 主要思路为,首先监听触屏事件touchstart这样可以获取...最后通过vue自定义事件,将事件注册为全局的事件。、 这样整个页面都可以使用触屏事件了。 具体的代码为 function vueTouch(el,binding,type){//触屏函数 ...
  • vue 自定义点击事件

    千次阅读 2017-12-27 11:15:41
    我们在项目开发使用vue的时候发现vue内置的click事件在移动端使用会有300毫秒的点击延迟,所以我们就自己写了一个点击的自定义事件,希望对各位有所帮助,不足之处希望各位能够及时沟通。 废话就不多说了,直接贴...
  • 原因是自定义事件名称含有大写的字母改为handleclick就可以了
  • 本文通过图文并茂的形式给大家介绍了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 ,对HTML的原生事件做了支持。例如:click、focus、change等事件。除了原生事件外,Vue 还允许用户自定义事件。 什么是事件?什么是自定义事件? 在了解自定义事件前,先来了解什么是事件
  • Vue中自定义别名

    千次阅读 2018-10-21 11:30:24
    文章目录介绍使用在普通js使用在css使用疑问 ...但是在vue里面我们可以不这么做,在build/webpack.base.conf.js文件可以修改, 我们看到这个节点下已经有了文件配置了: 这里我们自己加入了一个sty...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 141,293
精华内容 56,517
关键字:

vue中自定义事件

vue 订阅