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

站长资源 2024/11/26 佚名

2 0 1

组件通信

从父组件向子组件通信，通过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="/UploadFiles/2021-04-02/vue.js">


子组件有两个按钮，分别实现+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="/UploadFiles/2021-04-02/vue.js">

仍然是点击按钮+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="/UploadFiles/2021-04-02/vue.js">


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

  接受一个value属性
  在有新的value时触发input事件

更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    vue.js,组件通信,自定义事件

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Vue.js组件通信之自定义事件详解”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

JavaScript闭包相关知识解析

Vue.js自定义指令学习使用详解

评论“Vue.js组件通信之自定义事件详解”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接