浅谈Vue2.0父子组件间事件派发机制

yizhihongxing

浅谈Vue2.0父子组件间事件派发机制

父子组件通信

在Vue中,父子组件通过props和$emit的方式进行通信。props是从父组件向子组件传递数据的方式,而$emit则是从子组件向父组件传递事件的方式。

父组件通过props向子组件传递值:

<template>
  <div>
    <ChildComponent :value="data"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      data: 'Hello World!'
    }
  }
}
</script>

子组件中则通过props来接收父组件传递过来的值:

<template>
  <div>
    <p>{{ value }}</p>
  </div>
</template>

<script>
export default {
  props: {
    value: String
  }
}
</script>

在子组件中,可以通过$emit来派发一个自定义事件(可以携带参数):

<template>
  <div>
    <button @click="onClick">点击传递事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit('my-event', 'Hello World!')
    }
  }
}
</script>

然后在父组件中,通过$on监听这个事件,并处理其中携带过来的参数:

<template>
  <div>
    <ChildComponent @my-event="onMyEvent"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    onMyEvent(data) {
      console.log(data) // Hello World!
    }
  }
}
</script>

父子组件事件派发机制

除了使用$emit派发自定义事件外,Vue还提供了$parent和$children两个属性,用于父子组件间的直接通信。

  • $parent: 指向当前组件的父组件实例,可以通过它来调用父组件的方法或访问父组件的数据。

  • $children: 该属性指向当前组件所拥有的直接子组件实例数组,可以通过它来直接访问子组件。

举例来说,父组件可以通过$children属性,直接访问子组件并调用子组件中的方法:

<template>
  <div>
    <ChildComponent ref="child"></ChildComponent>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod()
    }
  }
}
</script>

子组件中则可以通过$parent属性,直接访问父组件并调用父组件的方法:

<template>
  <div>
    <button @click="callParentMethod">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod()
    }
  }
}
</script>

需要注意的是,虽然通过$parent和$children可以直接访问父子组件间的方法和数据,但这会导致组件间高度耦合,不易维护和扩展。在实际开发中,应尽量避免直接访问父子组件中的方法和数据,而是通过props和$emit的方式进行通信。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:浅谈Vue2.0父子组件间事件派发机制 - Python技术站

(0)
上一篇 2023年6月27日
下一篇 2023年6月27日

相关文章

  • 2018苹果WWDC主角还是iOS12 不会发布新硬件

    2018苹果WWDC主角还是iOS12,不会发布新硬件 苹果公司在每年的全球开发者大会上会发布一系列的新产品和更新,其中最受关注的是新版本的iOS系统以及新款的硬件设备。今年的WWDC即将开始,不过有消息称,苹果公司不会发布新的硬件产品,而是会集中力量宣布iOS12系统的新特性和更新。 苹果公司的策略 苹果公司一直以来都非常重视其硬件产品的品质和创新,但是在…

    other 2023年6月26日
    00
  • C++ Array容器的显示和隐式实例化详细介绍

    这里为你详细讲解“C++ Array容器的显示和隐式实例化详细介绍”。 什么是Array容器? C++中的Array容器是一个固定大小的数据结构,可以在声明时指定其大小,且大小不能改变。与C++中的原始数组类似,Array容器也是以0作为索引的。与原始数组不同的是,Array容器提供了一些高级的功能,例如动态分配内存,遍历元素,复制/填充数组等。 显示实例化…

    other 2023年6月26日
    00
  • 【8583】iso8583报文解析

    【8583】ISO8583报文解析 ISO8583是国际标准化组织制定的金融交易报文协议标准。该标准规定了金融交易报文的格式、数据元素以及报文的传输方式。ISO8583报文在现代金融交易中扮演着重要的角色。 ISO8583报文的结构 ISO8583报文由三个主要部分组成:消息头(Message Header)、位图(Bit Map)和消息体(Message …

    其他 2023年3月28日
    00
  • Android四大组件之Service服务详细讲解

    Android四大组件之Service服务详细讲解 什么是Service? Service是Android四大组件之一,它是在后台执行操作的组件,可以在不受用户干扰的情况下长时间运行。Service通常用于执行诸如下载、上传数据、播放音乐等耗时操作。 Service的分类 前台服务:与用户正在进行交互的Activity或者其他前台组件有关的服务。此类服务需要…

    other 2023年6月27日
    00
  • WAC集中转发部署

    WAC集中转发部署 WAC(Web Application Configurator)是一款基于Python的web应用程序部署工具,它的主要功能是将web应用程序部署到多个服务器上,并自动配置服务器以适应应用程序的需要。其中,集中转发部署是WAC的一种模式,通过这种模式可以让多个服务器共同服务一个web应用程序。 集中转发部署的优势 集中转发部署是一种有效…

    其他 2023年3月28日
    00
  • C++四种cast使用详细介绍

    C++四种cast使用详细介绍 在C++中,我们常常需要进行类型转换。而其中一种方式就是使用C++中的cast,本文将详细介绍C++中的四种cast。 C++中的四种cast C++中一共有四种cast,分别是static_cast、dynamic_cast、reinterpret_cast和const_cast。 static_cast static_ca…

    other 2023年6月26日
    00
  • MTK Android平台开发流程

    MTK Android平台开发流程 MTK是一家提供芯片方案的公司,其提供的手机芯片方案被很多手机厂商采用。针对MTK芯片的Android平台开发流程,可以简述为以下几个步骤: 硬件准备 在进行MTK Android平台开发之前,需要准备相应的硬件设备,包括MTK手机、数据线等。同时还需要安装相应的驱动软件,以便电脑可以与MTK手机正常连接。 环境搭建 MT…

    other 2023年6月26日
    00
  • ug怎么自定义工具栏? ug新建工具栏的教程

    下面是关于“UG怎么自定义工具栏?UG新建工具栏的教程”的完整攻略。 1. 创建新的工具栏 要创建新的工具栏,你需要按照以下步骤进行操作: 打开 UG 软件后,点击菜单栏中的“工具”(Tools)选项,在下拉菜单中选择“自定义”(Customize)选项。 在“自定义”对话框中,点击“新建”(New)按钮,选择“工具栏”(Toolbar)。 在弹出的“工具栏…

    other 2023年6月25日
    00
合作推广
合作推广
分享本页
返回顶部