精华内容
下载资源
问答
  • Vue组件自定义事件

    千次阅读 2019-05-10 15:56:25
    这时,Vue自定义事件就派上用场了。本文将详细介绍Vue自定义事件 事件绑定  每个 Vue 实例都实现了事件接口 (Events interface),即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件  [注意]...

    父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了。本文将详细介绍Vue自定义事件

    事件绑定

      每个 Vue 实例都实现了事件接口 (Events interface),即

    使用 $on(eventName) 监听事件
    使用 $emit(eventName) 触发事件

      [注意]Vue 的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是 $on 和 $emit 不是addEventListener 和 dispatchEvent 的别名

      另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

      [注意]不能用 $on 侦听子组件抛出的事件,而必须在模板里直接用 v-on 绑定

    <div id="example">
      <parent></parent>
    </div>
    <script>
    var childNode = {
      template: `<button @click="incrementCounter">{{ counter }}</button>`,
      data(){
        return {
          counter: 0
        }
      },
      methods:{
        incrementCounter(){
          this.counter ++;
          this.$emit('increment');
        }
      },
    }
    var parentNode = {
      template: `
      <div class="parent">
        <p>{{total}}</p>
        <child @increment="incrementTotal"></child>
        <child @increment="incrementTotal"></child>
      </div>
      `,
      components: {
        'child': childNode
      },
      data(){
        return {
          'total':0
        }
      },
      methods:{
        incrementTotal(){
          this.total ++;
        }
      }
    };
    // 创建根实例
    new Vue({
      el: '#example',
      components: {
        'parent': parentNode
      }
    })
    </script>

    命名约定

      自定义事件的命名约定与组件注册props的命名约定都不相同,由于自定义事件实质上也是属于HTML的属性,所以其在HTML模板中,最好使用中划线形式

    <child @pass-data="getData"></child>

      而子组件中触发事件时,同样使用中划线形式

     this.$emit('pass-data',this.childMsg)

     

    数据传递

      子组件通过$emit可以触发事件,第一个参数为要触发的事件,第二个事件为要传递的数据

    this.$emit('pass-data',this.childMsg)

      父组件通过$on监听事件,事件处理函数的参数则为接收的数据

        getData(value){
          this.msg = value;
        }
    <div id="example">
      <parent></parent>
    </div>

     

    <script>
    var childNode = {
      template: `
      <div class="child">
        <div>
          <span>子组件数据</span>
          <input v-model="childMsg" @input="data">
        </div>
        <p>{{childMsg}}</p>
      </div>
      `,
      data(){
        return{
          childMsg:''
        }
      },
      methods:{
        data(){
          this.$emit('pass-data',this.childMsg)
        }
      }
    }
    var parentNode = {
      template: `
      <div class="parent">
        <div>
          <span>父组件数据</span>
          <input v-model="msg">
        </div>
        <p>{{msg}}</p>
        <child @pass-data="getData"></child>
      </div>
      `,
      components: {
        'child': childNode
      },
      data(){
        return {
          'msg':'match'
        }
      },
      methods:{
        getData(value){
          this.msg = value;
        }
      }
    };
    // 创建根实例
    new Vue({
      el: '#example',
      components: {
        'parent': parentNode
      }
    })
    </script>

     

      下面示例中,修改子组件中的input值,则父组件到接收到相同值,则显示出来

     

     

    sync修饰符

      在一些情况下,可能会需要对一个 prop 进行双向绑定。事实上,这正是Vue1.x中的 .sync修饰符所提供的功能。当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定的值。这很方便,但也会导致问题,因为它破坏了单向数据流的假设。由于子组件改变 prop 的代码和普通的状态改动代码毫无区别,当光看子组件的代码时,完全不知道它何时悄悄地改变了父组件的状态。这在 debug 复杂结构的应用时会带来很高的维护成本,上面所说的正是在 2.0 中移除 .sync 的理由

      从 2.3.0 起重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器

    <comp :foo.sync="bar"></comp>

      会被扩展为:

    <comp :foo="bar" @update:foo="val => bar = val"></comp>

      当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:

    this.$emit('update:foo', newValue)

      因此,可以使用.sync来简化自定义事件的操作,实现子组件向父组件的数据传递

    <div id="example">
      <parent></parent>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
    var childNode = {
      template: `
      <div class="child">
        <div>子组件数据:{{childMsg}}</div>
        <input v-model="childMsg">
        <button @click=add >+1</button>
      </div>
      `,
      data(){
        return{
          childMsg: 0
        }
      },
      methods:{
        add(){
          this.childMsg++;
          this.$emit('update:foo',this.childMsg);
        }
      }
    };
    var parentNode = {
      template: `
      <div class="parent">
        <p>父组件数据:{{msg}}</p>
        <child :foo.sync="msg"></child>
      </div>
      `,
      components: {
        'child': childNode
      },
      data(){
        return {
          'msg':0
        }
      }
    };
    // 创建根实例
    new Vue({
      el: '#example',
      components: {
        'parent': parentNode
      }
    })
    </script>
    展开全文
  • 主要介绍了vue2.0 自定义组件的方法(vue组件的封装),本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
  • 使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <...
  • 本文通过图文并茂的形式给大家介绍了Vue组件自定义事件的功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 从父组件向子组件通信,通过props传递数据就可以了,但Vue组件通信的场景不止有这一种,归纳起来,组件之间的通信可以用下图来表示: 自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件。子组件用**$...

    组件通信

    从父组件向子组件通信,通过props传递数据就可以了,但Vue组件通信的场景不止有这一种,归纳起来,组件之间的通信可以用下图来表示:
    在这里插入图片描述

    自定义事件

    当子组件需要向父组件传递数据时,就要用到自定义事件。子组件用**$ emit()来触发事件**,父组件用**$ on()**来监听子组件的事件。
    父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的事件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <title>自定义事件</title>
    </head>
    <body>
        <div id="app">
            <p>总数:{{total}}</p>
            <my-component
                @increase="handleGetTotal"
                @reduce="handleGetTotal"></my-component>
        </div>
        <script>
            Vue.component('my-component',{
                template: '\
                    <div>\
                        <button @click="handleIncrease">+1</button>\
                        <button @click="handleReduce">-1</button>\
                    </div>',
                data: function () {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    handleIncrease: function () {
                        this.counter++;
                        this.$emit('increase', this.counter);
                    },
                    handleReduce: function () {
                        this.counter--;
                        this.$emit('reduce', this.counter);
                    }
                }
            });
    
            var app = new Vue({
                el: '#app',
                data: {
                    total: 0
                },
                methods: {
                    handleGetTotal: function (total) {
                        this.total = total;
                    }
                }
            });
        </script>
    </body>
    </html>
    

    在这里插入图片描述
    子组件有两个按钮,分别实现+1和-1的效果,在改变组件的data “counter”后,通过$emit()在把它传递给父组件,父组件使用v-on:increase和v-on:reduce监听事件。

    $emit()方法的第一个参数是自定义事件的名称,后面的参数是要传递的数据,可以不填或者填写多个。

    注意:除了用v-on在组件上监听自定义事件外,也可以监听DOM事件,这时候可以用 .native修饰符表示监听的是一个原生事件,监听的是该组件的根元素:

    <my-component v-on:click.native="handleClick"></my-component>
    

    使用v-model

    Vue 2.x 可以在自定义组件上使用v-model指令。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <title>使用v-model</title>
    </head>
    <body>
        <div id="app">
            <p>总数:{{total}}</p>
            <my-component v-model="total"></my-component>
        </div>
        <script>
            Vue.component('my-component',{
                template: '<button @click="handleClick">+1</button>',
                data: function () {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    handleClick: function () {
                        this.counter++;
                        this.$emit('input',this.counter);
                    }
                }
            });
    
            var app = new Vue({
                el: '#app',
                data: {
                    total: 0
                }
            });
        </script>
    </body>
    </html>
    

    仍然是点击按钮+1的效果,不过这次组件$emit()的事件是特殊的input,在使用组件的父级,并没有在<my-component>上使用@input=“handler”,而是使用了v-model板顶的一个数据total。这也可以称作是一个语法糖,因为上面的示例可以间接地用自定义事件来实现:

    <div id="myApp">
        <p>总数:{{total}}</p>
        <my-component1 @input="handlegetTotal"></my-component1>
    </div>
    <script>
        Vue.component('my-component1',{
            template: '<button @click="handleClick">+1</button>',
            data: function () {
                return {
                    counter: 0
                }
            },
            methods: {
                handleClick: function () {
                    this.counter++;
                    this.$emit('input',this.counter);
                }
            }
        });
    
        var myApp = new Vue({
            el: '#myApp',
            data: {
                total: 0
            },
            methods: {
                handlegetTotal: function (value) {
                    this.total = value;
                }
            }
        });
    </script>
    

    v-model还可以用来创建自定义的表单输入组件,进行数据双向绑定:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <title>自定义表单输入组件</title>
    </head>
    <body>
        <div id="app">
            <p>总数:{{total}}</p>
            <my-component v-model="total"></my-component>
            <button @click="handleReduce">-1</button>
        </div>
        <script>
            Vue.component('my-component',{
                props: ['value'],
                template: '<input :value="value" @input="updateValue">',
                methods: {
                    updateValue: function (event) {
                        this.$emit('input', event.target.value);
                    }
                }
            });
    
            var app = new Vue({
                el: '#app',
                data: {
                    total: 0
                },
                methods: {
                    handleReduce: function () {
                        this.total--;
                    }
                }
            });
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    注意:实现这样一个具有双向绑定的v-model组件要满足下面的两个要求:

    • 接受一个value属性
    • 在有新的value时触发input事件
    展开全文
  • 主要给大家介绍了关于利用vue组件自定义v-model实现一个Tab组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
  • [vue] vue组件绑定自定义事件无效怎么解决? 两种方式 1、组件外部加修饰符.navtive 2、组件内部声明$emit('自定义事件') 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎...

    [vue] vue给组件绑定自定义事件无效怎么解决?

    两种方式
    1、组件外部加修饰符.navtive
    2、组件内部声明$emit('自定义事件')
    

    个人简介

    我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
    但坚持一定很酷。欢迎大家一起讨论

    主目录

    与歌谣一起通关前端面试题

    展开全文
  • 实现一个日期组件,如图: components.js代码如下: Vue.component('sc-calendar',{ template:'<div class=scCalendar>' + '<div class=calendar_header>' + '<div class=prev click=prevMonth> < </div>' ...
  • Vue组件事件添加自定义参数 这次写前端的时候有个功能需求,用 elemet-table 自定义组件,但是要向外部传递 table 子组件事件,如下: 自定义组件 nc-table <el-table> <el-table-column v-bind...

    Vue 向组件事件添加自定义参数

    这次写前端的时候有个功能需求,用 elemet-table 自定义组件,但是要向外部传递 table 子组件的事件,如下:

    自定义组件 nc-table

    <el-table>
    	<el-table-column 
    		v-bind="getColumnDefaultProps(col.props)" 
    		v-for="(col, index) in config.column" :key="index">
    	</el-table-column>
    </el-table>
    

    现在想把el-table 的所有事件继续向外传递,也就是期望在父组件中的用法

    <nc-table :config="tableConfig"
    	@select="select"
    	@cell-mouse-enter="mouseEnter"
    	....其他事件
    >
    </nc-table>
    

    由于template中不能像 v-bind="props" 一次性传入所有props,事件必须一条条列出来写上(有其他办法的同学欢迎留言),于是自定义组件中可以这么写

    <el-table
    	 @select="transmit(arguments, 'select')"
         @select-all="transmit(arguments, 'select-all')"
         @selection-change="transmit(arguments, 'selection-change')"
         @cell-mouse-enter="transmit(arguments, 'cell-mouse-enter')"
         @cell-mouse-leave="transmit(arguments, 'cell-mouse-leave')"
         ......其他事件......
    >
    	<el-table-column 
    		v-bind="getColumnDefaultProps(col.props)" 
    		v-for="(col, index) in config.column" :key="index">
    	</el-table-column>
    </el-table>
    
    /**
     * 在method中定义公共方法transmit
     * arguments: 是vue中组件的事件默认参数
     * ev: 是自己定义的传递的参数,也就是emit类型
     **/
     transmit(arguments, ev){
     	//将事件再抛出去
        this.$emit(ev, ...arguments)
     },
    

    注意 $emit 的参数,要使用...arg 而不是 直接arg ,这样才能在父组件的事件处理函数中列出参数名,不然传入会把第一个参数变成数组,其他参数为undefine

    这样在父组件中引用自定义组件,就能像在el-table上写事件处理一样啦

    展开全文
  • 首先 vue 实例有event对象 可以实现自定义事件,实现兄弟组件间通信。 项目结构:event.js 导出vue实例对象 Input.vue 和 list.vue 是兄弟组件 ,index.vue 引入 两个子组件,实现 Input 和list 间通信 看event....
  • 先贴代码 var myButton = Vue.extend({//设置标签 props: ['names', 'item2'],//names为按钮名,item2为数据 ...这是上篇博客的自定义按钮权限的代码,然后调用代码: <my-button names=”修改” v-
  • 想封装一个自定义组件,父组件能控制子组件写的点击事件 解决: 子组件写的 在点击的move事件内写 that.$emit('leftClick',that.Slider_text) 或者可以写成这样 <div class="YSwitch bg-Gainsboro" v-on:click=...
  • vue 项目开发中,常常为了,节省代码、高效利用,会封装自定义组件,封装自定义组件,传值就是 prop ,那绑定事件呢? <!-- * @Description: * @Author: 呆呆狗 * @Date: 2021-05-09 10:02:15 * @...
  • 浅谈Vue 自定义事件——原理及用法

    千次阅读 2020-05-12 14:14:49
    Vue 中,对HTML的原生事件做了支持。例如:click、focus、change等事件。除了原生事件外,Vue 还允许用户自定义事件。 什么是事件?什么是自定义事件? 在了解自定义事件前,先来了解什么是事件。
  • Vue组件自定义事件的绑定和解绑

    热门讨论 2021-12-04 15:23:14
    不知道小伙伴们还记不记得在用 Vue 构建 TodoList 案例的博客中,我们有涉及到要从子...使用场景:A 是父组件,B 是子组件,B 想给 A 传数据,那么就要在 A 中给 B 绑定自定义事件(事件的回调在 A 中) 组件自定义
  • vue组件(三)—自定义事件

    千次阅读 2018-09-29 17:54:30
    组件和 prop 不同,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件: this.$emit('myEvent') 则监听这个...
  • 主要介绍了Vue自定义全局弹窗组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue.js 组件自定义事件组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件! 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),...
  • 主要介绍了vue自定义全局组件(自定义插件)的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue-自定义组件传值的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue 3 自定义事件

    2020-10-23 21:50:36
    自定义事件除了系统自带的原生 DOM 自带的事件之外,有时候我们需要用到这些自带的事件之外,我们就必须要自定义事件了。事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换。而...
  • 在子组件中通过 $emit 向父组件传值,父组件除了接收传过来的值,还需要添加额外的自定义参数时 demo地址:github.com/zengkun/vue… 1、子组件传出单个参数时: // 子组件 this.$emit('test', param) // 父组件 @...
  • 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码。 1.全局组件 定义方式示例: Vue.component("hello-component",{ props:["message"], ...
  • 等原生事件,vue还支持自定义事件自定义事件应该分为三步: 1、声明自定义事件 2、监听自定义事件 3、触发自定义事件vue中,声明和监听自定义事件被合为一个步骤,即使用$on(eventName,callback)同时声明和...
  • 今天小编就为大家分享一篇关于vue组件事件属性穿透详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue EventBus自定义组件事件传递,组件化应用构建是Vue的特点之一,本文主要介绍EventBus进行数据消息传递 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了浅谈Vue.js 组件中的v-on绑定自定义事件理解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文实例讲述了vue使用自定义事件的表单输入组件用法。分享给大家供大家参考,具体如下: 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。 v-model的实现原理 : <input v-model...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 87,575
精华内容 35,030
关键字:

vue组件自定义事件

vue 订阅