在原有基础上修改 div
<div id="app">
<input v-model="inputValue" type="text" />
<button @click="handleAddBtn">提交</button>
<ul>
<todo-item
:content="item"
:index="index"
v-for="(item,index) in list"
@delete="handleDeleteItem"
>
</todo-item>
</ul>
</div>
创建子组件
let TodoItem = {
// 需要传递的参数
props: {
content: this.content,
index: this.index,
},
template: "<li @click='handleItemClick'>{{content}}</li>",
methods: {
handleItemClick() {
// 向父组件传递事件和参数
this.$emit("delete", this.index)
}
},
}
let app = new Vue({
el: '#app',
components: {
TodoItem
},
data: {
list: [111, 222, 333],
inputValue: ''
},
methods: {
handleAddBtn() {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDeleteItem(index) {
console.log(index)
this.list.splice(index, 1)
}
},
})
效果展示
效果展示
