1. 不使用組件 ~~~ <template> <div class="home"> <input v-model="value"> <button @click="handleClick">增加</button> <ul> <li v-for="(item,index) of list" :key="index" @click="handleDelete(index)">{{item}}</li> <!-- <list-item v-for="(item,index) of list" :key="index" :inx="index" :item="item" @delete="handleDelete"></list-item> --> </ul> </div> </template> <script> import ListItem from "../components/ListItem"; export default { name: "home", components:{ ListItem }, data() { return { value: "hello world", list: [] }; }, methods: { handleClick() { if (!this.list.includes(this.value)) { this.list.push(this.value); this.value=""; } }, handleDelete(index){ this.list.splice(index,1) } } }; </script> <style lang="scss" scoped> </style> ~~~ 2. 使用組件 ~~~ //ListItem.vue <template> <div> <li @click="handleDelete" > {{item}}</li> </div> </template> <script> export default { name:"ListItem", props:{ item:{ type:String, }, inx:{ type:Number } }, methods:{ handleDelete(){ this.$emit("delete",this.inx) } } } </script> ~~~