Использование эмиссий в Vue 3

Я собираюсь обновить проект vue 2 до vue 3. В моем проекте vue 2 есть два источника. Я хочу изменить его как vue 3. Я нашел способ использовать эмиссии в vue 3 с помощью машинописного текста. Вот скриптовая часть кода в моем обновленном проекте.

<script lang = "ts">
import { Component, Vue } from 'vue-facing-decorator';
import { DataTableActionTypes } from '@/shared/enums/dataTableActionTypes.enum';
import Modal from '@/shared/components/modal/Modal.vue';
import { defineComponent } from 'vue';

export default defineComponent ({
    name : 'AddressListActionButtons',
    components: {
        Modal
    },
    props: {
        item : {
            type : undefined,  //since type as any in vue 2 project
        },
        
    },
    showDeleteAddressConfirmation = false,

    methods : {
        onDeleteAddressClick() {
            this.showDeleteAddressConfirmation = true;
            this.onAction(this.item, DataTableActionTypes.ActionButtonSelect);
        },

        onCloseDelete() {
            this.showDeleteAddressConfirmation = false;
            this.onAction(this.item, DataTableActionTypes.ResetActionButtton);
        },
        deleteAddress() {
            this.showDeleteAddressConfirmation = false;
            this.onDeleteAddress(this.item, DataTableActionTypes.Delete)
        }
    },
    

    emits : ['customEvent'],
        setup(props, { emit }) {
            const onAction = (data: any, type: DataTableActionTypes)=>{
            
            }
        },
        
    emits : ['customEvent'],
        setup(props, { emit }) {
            const onDeleteAddress = (id: number, type: DataTableActionTypes)=>{
            
            }
        },    


})
</script>

Поскольку есть два эмитирования, появляется сообщение об ошибке, которое называется Литерал объекта не может иметь несколько свойств с одинаковым именем.ts(1117). На самом деле эта ошибка возникает из-за того, что я использую два ключевых слова emits. Есть ли решение для решения этой ошибки?

vue.js vuejs2 vuejs3 vue-component

18.05.2023 18:31

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я бы рекомендовал использовать состав API следующим образом:

<script setup>
import { defineEmits } from "vue";
const emit = defineEmits(["emit1", "emit2"]);

const sendEmit1 = () => {
  emit("emit1");
};
const sendEmit2 = () => {
  emit("emit2");
};
</script>

<template>
  <button @click = "sendEmit1">emit 1</button>
  <button @click = "sendEmit2">emit 2</button>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

Рабочий пример на codeandbox

На самом деле я использую машинопись. Из-за этого я не могу использовать <настройка сценария>. Вот почему я использую defineComponent. Как использовать Vue 3 с TypeScript

— 19.05.2023 05:16

@KanchanaKariyawasam, вы наверняка можете использовать его с машинописным текстом, как вы можете видеть в документах: https://vuejs.org/guide/components/events.html#declaring-emi‌tted-events

— 19.05.2023 16:17

18.05.2023 19:23