Question about Specifying Prop Types in Vue 3 with defineProps in JavaScript #13110
-
Vue version
3.5.13
Link to minimal reproduction
Steps to reproduce
In the parent component, I binded the state.todoList data to the child component via props.
In TodoList.vue, I used the defineProps function to define the props without specifying a type.
But running the project, a reference error occurs.
What is expected?
The todoList data, which is a prop, should be displayed through {{todoList}} in the section.
What is actually happening?
System Info
Any additional comments?
I modified the code as follows:
const props = defineProps({ todoList : "" })
After this modification, the expected result was displayed without any errors or warnings. However, JavaScript doesn’t enforce type validation like TypeScript does, and the data from App.vue is clearly passed to the child component.
So, I’m not sure why it’s necessary to specify the type of props in JavaScript.
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 2 comments
-
https://vuejs.org/guide/components/props.html#props-declaration
defineProps(['todoList']) //or defineProps({ todoList: Array })
Beta Was this translation helpful? Give feedback.
All reactions
-
❤️ 1
-
@seul15 I have written two Playground, one using typescript and the other using JavaScript.
You can choose whatever you want to use:
JavaScript: Playground
const props = defineProps({ todoList: { type: Array, default: () => [] } });
TypeScript: Playground
import { PropType } from 'vue'; interface TodoItem { id: number todo: string completed: boolean } const props = defineProps({ todoList: { type: Array as PropType<Array<TodoItem>>, default: () => [] } });
Beta Was this translation helpful? Give feedback.