[Vuejs]-How to use type: importedCompenent in Vue3 compenent props?

by

0👍

From your provided code I guess you don’t need to use props inside the TodoList component, given TodoList and TodoItem are a pair of parent-child component. You can try below code to pass data between them:

TodoItem.vue: nothing need to change.

TodoList.vue:

<template>
  <TodoItem :name="todos.name" :isCompleted="todos.isCompleted" />
</template>

import { ref } from 'vue
export default defineComponent({
  name: 'todoList',
  components: {
    TodoItem
  },
  setup() {
    const todos = ref({
      name: '',
      isCompleted: false
    })
    return {
      todos
    }
  }
});

or you can pass name and isCompleted separately, meaning getting rid of todos:

TodoList.vue:

<template>
  <TodoItem :name="name" :isCompleted="isCompleted" />
</template>

import { ref } from 'vue
export default defineComponent({
  name: 'todoList',
  components: {
    TodoItem
  },
  setup() {
    const name = ref('')
    const isCompleted = ref(false)
    })
    return {
      name,
      isCompleted
    }
  }
});

Above are for one-way data pass (from TodoList to TodoItem). If you are seeking two-way data pass, you can try setup(props, {emit}) in TodoItem.vue.

Leave a comment