vue的$emit的详解

最新推荐文章于 2025-03-03 10:02:32 发布

noodzhan

最新推荐文章于 2025-03-03 10:02:32 发布

阅读量2.1k

点赞数 1

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/guidgeek/article/details/106306392

版权

这篇博客澄清了关于Vue.js中$emit的模糊理解，特别是它在父子组件通信中的作用。通过三步深入讲解，解决了如何从子组件向父组件传递数据的问题。文中结合代码示例，详细解释了$emit的使用，包括点击事件监听和事件触发机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上很多教程关于$emit的使用，但是解释都模糊不清，什么父子传递？？

代码1：

<template>
  <div class="tab-control">
    <div class="tab-control-item"
         :class="{active: currentIndex === index}"
         @click="itemClick(index)"
         v-for="(item, index) in titles">
      <span>{{item}}</span>
    </div>
  </div>
</template>

methods: {
      itemClick: function (index) {
        // 1.改变currentIndex
        this.currentIndex = index;

        // 2.发出事件
        this.$emit('itemClick', index)
        }
}

代码2：

 <tab-control @itemClick="tabClick"
                     :titles="['流行', '新款', '精选']"
                     ref="tabControl"></tab-control>

methods: {
		  tabClick(index) {
		    switch (index) {
          case 0:
            this.currentType = POP
            break
          case 1:
            this.currentType = NEW
            break
          case 2:
            this.currentType = SELL
            break
        }
      },

前提：知道$emit 是触发当前组件的事件。附上官方api截图
在这里插入图片描述

看懂三步，解决`$emit`什么子传父问题

<div class="tab-control-item"/> 中的@click，是设置点击监听，处理函数是<div class="tab-control">中的itemClick(index)函数；
itemClick函数的最后this.$emit('itemClick', index)，是触发事件名为itemClick的事件。而itemClick是属于tab-control；
代码2，<tab-control @itemClick="tabClick",设置事件名为itemClick的事件，处理函数为（代码2下面）methods中的tabClick(index)函数。