emit事件

1. 父子组件通信 （vue2）

需求：<Bottom>组件可以弹出弹窗，弹窗内容为<Find>组件，该组件可以上传图片并预览。现在需要实现点击bottom的ok按钮，触发一个事件来清除find组件的previewUrl并渲染在页面，使得再次打开弹窗图片为空。

实现原理： 父组件给子组件传一个porps 并 监听自定义事件，porps初始值为父组件的data【保证不修改porps】，自定义事件为更新previewUrl为最新值。子组件上传图片事件为$emit('自定义事件', 新值)实现previewUrl值的实时更新

<template>
<div @click="handleOk">
    <Find :previewUrl="previewUrl" @update:previewUrl="updatePreviewUrl" />
</div>
</template>
<script>
default export {
    data() {
        previewUrl: null;
    },
    methods: {
        handleOk() {
            this.previewUrl = null
        },
        updatePreview(newPreviewUrl) {
            this.previewUrl = newPreviewUrl
        }
    }
}
</script>

<template>
    <!-- 展示上传的图片预览 -->
    <div v-if="previewUrl" class="half-width">
        <img :src="previewUrl" alt="Preview" class="uploaded-image" />
    </div>
</template>
<script>
export default {
    props: {
        previewUrl: String
    },
    methods: {
        // 上传预览代码
        handleBeforeUpload(file) {
            // 使用 FileReader 对象预览图片
            const reader = new FileReader();
            reader.readAsDataURL(file);
            
            // 触发emit父组件的自定义事件更新previewUrl
            reader.onload = () => {
                this.$emit('update:previewUrl', reader.result); // 发送预览图片的事件
            };
              
            // 上传并获取返回值的逻辑...
        }
    }
}
</script>

2. 如果父组件有多个相同事件名，子组件的emit如何判断哪个是想要触发的事件？

这一过程其实就是父组件调用子组件时，子组件使用emit触发父组件的自定义事件来改变某值（或某事件），只需要让子组件再设置一个props来标识对应的父组件，并在emit触发事件时做逻辑判断标识是哪个父组件在使用他即可，这样就不会影响其他父组件

<template>
  <div>
    <child-component :value="y" :isParentA="true" @input="handleInputA"></child-component>
  </div>
</template>


<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      y: 0
    };
  },
  methods: {
    handleInputA(value) {
      this.y = value;
      // 处理父组件A的逻辑
    }
  }
}
</script>

<template>
  <div>
    <!-- 注意：这里使用了 prop 传递一个标识 isParentA -->
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
export default {
  props: {
    value: Number,
    isParentA: Boolean  // 使用 prop 传递一个标识，告诉子组件是哪个父组件在使用它
  },
  methods: {
    toggle() {
      // 根据标识判断是哪个父组件，然后触发对应的 input 事件
      const newValue = !this.value;
      if (this.isParentA) {
        this.$emit('input', newValue);
      }
      // 在这里可以添加其他逻辑，处理其他父组件的情况
    }
  }
}
</script>