vue组件拆分todolist简单demo

1、项目结构

2、TodoList组件

把自己定义为组件时需要name:TodoList，引用组件时需要imporrt 组件，然后components里注册该组件，才能使用它。

<template>
  <input  v-model="inputValue">
  <button @click="handleAdd" class="button">新增</button>
  <ul>
    <!-- <li v-for="(item,index) in list" :key="index">{{item}}</li> -->
    <ListItem v-for="(item,index) in list" :key="index" :msg="item"></ListItem>
  </ul>
</template>

<script>
import ListItem from "./components/ListItem.vue"
import {reactive,ref} from "vue"
export default {
  name:"TodoList",
  components:{
    ListItem
  },
  setup(){
    const inputValue=ref("")
    const list=reactive([])
    const handleAdd=()=>{
      list.push(inputValue.value)
      inputValue.value=""
    }
    return {handleAdd,inputValue,list}
  }
}
</script>

<style>
.button{
  margin-left: 20px;
}

</style>

3、ListItem组件

涉及组件的参数传递，用props来接收父组件传递的参数

<template>
  <li>{{ msg }}</li>
</template>

<script>
export default {
  name:"ListItem",
  props:{
    msg:String,
  }

}
</script>

<style>

</style>