<html>
<head>
<meta charset="utf-8">
<title>属性绑定和双向数据绑定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input type="text" v-model="pushvalue">
<button @click="clickButton">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@click='itemDelete'
>
</todo-item>
</ul>
</div>
<script>
// Vue.component("todo-item",{
//template:'<li>item</li>'
// })
var todoItem={
template:'<li @click="listClick">{{content}}</li>',
props:['content','index'],
methods:{
listClick:function(){
this.$emit("delete",this.index);
}
}
}
new Vue({
el:"#root",
components:{
'todo-item':todoItem
},
data:{
list:[],
pushvalue:''
},
methods:{
clickButton:function(){
if(this.pushvalue==''){
alert("请输入再提交");
}
else{
this.list.push(this.pushvalue);
this.pushvalue='';
}
},
itemDelete:function(index){
alert(index);
this.list.splice(index,1);
alert(index);
}
}
})
</script>
</body>
</html>
<todo-item>其实是一个无法识别的标签，可以理解为自定义标签，但你没有定义它
子组件对外发布的是delete，我监听的是click，有反应才怪，谢谢各位