Vue3 컴포넌트 만들기

 

 

 

 

 

 

 

 

 

 

components 안에 TodoForm.vue 생성

 

 

컴포넌트 안에는 기본적으로

<Template>,<Script>,<Style>이 필요하다

<template>
    TodoForm이 불러와짐
</template>

<script>
export default {
}
</script>

<style>
</style>

//TodoForm.vue

컴포넌트를 불러오고자 하는 App.vue로 돌아와서

import TodoForm from './components/TodoForm.vue';
export default {
components:{
  TodoForm
},

import와 화면으로 보내기 위한 export default를 통해 보낼 컴포넌트를 선택한다

<template>
<div class ="container">
  <h1>TodoList</h1>
  
 <TodoForm/>  //<--이부분
 
<form
@submit.prevent="Submit" 
 class="d-flex">

<div class="flex-grow-1 ">
<input class="form-control "
 type="text"
  v-model="todo" 
  placeholder="할일"
  >
</div>
//...생략

 

 

출력하고자 하는 위치에 컴포넌트를 쏴주면