Vue.js组件通信之自定义事件详解

2024-11-30 11:13:47

组件通信

从父组件向子组件通信，通过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.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

浅谈Vue.js 组件中的v-on绑定自定义事件理解

每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件 Vue的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名. 另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. 下面是一个文档上面的例子: 2017年4月11日更新 <d
Vue自定义事件(详解)

前面的话父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件事件绑定每个 Vue 实例都实现了事件接口 (Events interface),即使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是 $on 和 $emit 不是addEventListener 和 disp
Vue.js自定义事件的表单输入组件方法

Vue.js使用自定义事件的表单输入组件自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定.要牢记: <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value"> 所以在组件中使用时,它相当于下面的简写: <
vue子组件使用自定义事件向父组件传递数据

使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit('自定义的事件名称',传递给父组件的数据) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></scr
Vue组件之自定义事件的功能图解

使用v-on绑定自定义事件 (一)基于webpack的项目初始化在使用之前,我们先使用npm构建一个vue应用,使该项目能很好地和webpack模块打包器配合使用,命令如下进入自定义空文件夹vuepro下,myapp项目初始化需利用webpack打包生成一个标准目录的项目文件夹 vue init webpack myapp 安装过程会出现以下几个让我们操作的地方,前几个直接按回车,后面输入n即可,如下图安装完成后,myapp文件夹下会自动生成一些文件和文件夹,表示我们项目初始化完成,而我们
VUE DOM加载后执行自定义事件的方法

最近想用vue做一个小东西,谁知道一开始就遇到了一个棘手的问题: 首先我想在页面加载前通过ajax请求页面展示所需要的信息,于是我在created钩子函数里面请求了我想要的数据 created:function(){ var url="/indexitem"; var _self=this; $.get(url,function(data){ _self.items=data; }); $.get('/banner',function(data){ _self.banners=data
Vue.js组件通信之自定义事件详解

组件通信从父组件向子组件通信,通过props传递数据就可以了,但Vue组件通信的场景不止有这一种,归纳起来,组件之间的通信可以用下图来表示: 自定义事件当子组件需要向父组件传递数据时,就要用到自定义事件.子组件用**$ emit()来触发事件**,父组件用**$ on()**来监听子组件的事件. 父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的事件. <!DOCTYPE html> <html lang="en"> <head>
Vue.js组件props数据验证实现详解

本文实例为大家分享了Vue.js组件props数据验证的具体代码,供大家参考,具体内容如下数据验证一般当组件需要提供给别人使用时,就需要使用数据验证. 示例: <script> Vue.component('my-component',{ props:{ //必须是数字类型 propA: Number, //必须是字符串或数字类型 propB:[String, Number], //布尔值,如果没有定义,默认值就是true propC:{ type: Boolean, default: t
Vue.js组件通信的几种姿势

写在前面因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址: https://github.com/answershuto/learnVue . 在学习过程中,为Vue加上了中文的注释 https://github.com/answershuto/learnVue/tree/master/vue-src ,希望可以对其他想学习Vue源码的小伙伴有所帮助. 可能会有理解存在偏差的地方,欢迎提issu
Angular4.x Event (DOM事件和自定义事件详解)

Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)="onClick()">Click</button> DOM元素 DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡. DOM事件冒泡与Angular可以无缝工作,具体示例如下: im
Vue.js原理分析之nextTick实现详解

前言 tips:第一次发技术文章,篇幅比较简短,主要采取文字和关键代码表现的形式,希望帮助到大家.(若有不正确还请多多指正) nextTick作用和用法用法:nextTick接收一个回调函数作为参数,它的作用是将回调延迟到下一次DOM更新之后执行,如果没有提供回调函数参数且在支持Promise的环境中,nextTick将返回一个Promise. 适用场景:开发过程中,开发者需要在更新完数据之后,需要对新DOM做一些操作,其实我们当时无法对新DOM进行操作,因为这时候还没有重新渲染,这时候nex
Vue父子组件属性传递实现方法详解

目录前言组件之间属性的传递父组件传递属性给子组件子组件传递属性给父组件前言这节我们主要从案例出发,用Vue3的写法写父子组件之间的属性传递. 组件之间属性的传递我们定义一个Rate组件,具有以下功能: 接收来自外部组件传入的参数,starCount代表星星个数.color代表星星颜色. 需要根据传入星星的个数,展示对应数量的星星. 父组件传递属性给子组件那么在编写组件的时候,我们需要注意什么? 我们可以使用defineProps来规范传递数据的格式.可以结合withDefault
Vue.js框架路由使用方法实例详解

Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-
Vue.js图片预览插件使用详解

Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程. 如果你已经是有经验的前端开发者,想知道 Vue
Vue transx组件切换动画库示例详解

目录来个介绍安装使用支持参数支持事件支持API 支持的动画类型说明来个介绍先奉上组件库的名称:transx github地址:github.com/tnfe/transx npm参考: www.npmjs.com/package/tra… 示例地址:codesanbox 安装 npm install transx or yarn add transx 使用  <trans-x :time="time" :delay=&q

Vue.js组件通信之自定义事件详解

相关推荐

随机推荐