我定义的子组件是局部组件，为什么<todo-item @click='itemDelete'></to-item>没报错，但是点击，itemDelete不执行
<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>
