Subscribe on changes!

defineComponent's emits type error when use '-' in event name

avatar
Aug 15th 2023

Vue version

3.3.4

Link to minimal reproduction

https://github.com/tangtangtangtangtang/vite-test image

Steps to reproduce

  1. In TypeScript Type DefineComponent process the emits & props with ResolveProps;

  2. Inside this ResolveProps it process the emit with type EmitsToProps;

  3. EmitsToProps add a prefix 'on' and Capitalize, the result will be onGo-task, so the component props need a onGo-task props;

    image
  4. when use this component <HelloWorld @go-task="goTask" />, it will change the props to camel case which is onGoTask;

  5. in vue 2.7, defineComponent did not process the emits into props; so it makes the props type error

    image

What is expected?

should we not use - in emits?

What is actually happening?

type error when defineEmits use -

System Info

No response

Any additional comments?

No response

avatar
Aug 16th 2023
    "vue/attribute-hyphenation": "off",
    "vue/v-on-event-hyphenation": "off",
const props = defineProps<{
  myTask?: Task[];
}>();

const emit = defineEmits<{
  (evt: 'goTask'): void;
}>();
<script lang="ts" setup>
import { VxTaskList } from 'vue-components';
import { WxTaskList } from 'web-components';
import { MdFilledTextField } from '@material/web/textfield/filled-text-field';

import TaskList from './TaskList.vue';

const goTask = () => {};
</script>

<template>
  <!-- This is how I use Vue components -->
  <TaskList :myTask="[]" @goTask="goTask" />
  <VxTaskList :myTask="[]" @goTask="goTask" />
  
  <!-- This is how I use Web Components -->
  <wx-task-list :my-task="[]" @go-task="goTask"></wx-task-list>
  <md-filled-text-field label="Mx" :value="''" @input="inputTextfield"></md-filled-text-field>
</template>
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('-'),
        },
      },
    }),
avatar
Aug 16th 2023
    "vue/attribute-hyphenation": "off",
    "vue/v-on-event-hyphenation": "off",
const props = defineProps<{
  myTask?: Task[];
}>();

const emit = defineEmits<{
  (evt: 'goTask'): void;
}>();
<script lang="ts" setup>
import { VxTaskList } from 'vue-components';
import { WxTaskList } from 'web-components';
import { MdFilledTextField } from '@material/web/textfield/filled-text-field';

import TaskList from './TaskList.vue';

const goTask = () => {};
</script>

<template>
  <!-- This is how I use Vue components -->
  <TaskList :myTask="[]" @goTask="goTask" />
  <VxTaskList :myTask="[]" @goTask="goTask" />
  
  <!-- This is how I use Web Components -->
  <wx-task-list :my-task="[]" @go-task="goTask"></wx-task-list>
  <md-filled-text-field label="Mx" :value="''" @input="inputTextfield"></md-filled-text-field>
</template>
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('-'),
        },
      },
    }),

so it's not recommend to use hyphenation event in vue components? By the way, where should I put this configuration("vue/v-on-event-hyphenation": "off"), seems it's not in the https://vuejs.org/