todolist刪除沒反應(yīng)也沒報錯，求大家?guī)兔纯?/h1>
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>vue中組件與實例的關(guān)系</title>
????<script?src="./vue.js"></script>
</head>
<body>
<div?id="root">
????<div>
????????<input?v-model="inputValue"?/>
????????<button?@click="handleSubmit">提交</button>
????</div>
????<ul>
????????<todo-item?v-for="(item,index)?of?list"
?:key="index"
?:content="item"
?:index="index"
?@click="handleDelete"
?>
????????</todo-item>
????</ul>
</div>
<script>
?//全局組件?(vue中組件與實例的關(guān)系:vue的每一個組件都是vue的實例);
?Vue.component('todo-item',{
????????props:['content','index'],//從副組件中接收content數(shù)據(jù)和index下標(biāo)
?template:'<li>{{content}}?{{index}}</li>',
?methods:{
????????????handleClick:function(){
???????????????this.$emit('delete',this.index)
????????????},
?}
????});
?new?Vue({
????????el:"#root",
?data:{
????????????inputValue:'',
?list:[]
????????},
?methods:{
????????????handleSubmit:function?()?{
????????????????this.list.push(this.inputValue)
????????????????this.inputValue?=?''
?},
?handleDelete:function?()?{
????????????????alert(11);
?}
????????}
????});
</script>
</body>
</html>
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>vue中組件與實例的關(guān)系</title>
????<script?src="./vue.js"></script>
</head>
<body>
<div?id="root">
????<div>
????????<input?v-model="inputValue"?/>
????????<button?@click="handleSubmit">提交</button>
????</div>
????<ul>
????????<todo-item?v-for="(item,index)?of?list"
?:key="index"
?:content="item"
?:index="index"
?@click="handleDelete"
?>
????????</todo-item>
????</ul>
</div>
<script>
?//全局組件?(vue中組件與實例的關(guān)系:vue的每一個組件都是vue的實例);
?Vue.component('todo-item',{
????????props:['content','index'],//從副組件中接收content數(shù)據(jù)和index下標(biāo)
?template:'<li>{{content}}?{{index}}</li>',
?methods:{
????????????handleClick:function(){
???????????????this.$emit('delete',this.index)
????????????},
?}
????});
?new?Vue({
????????el:"#root",
?data:{
????????????inputValue:'',
?list:[]
????????},
?methods:{
????????????handleSubmit:function?()?{
????????????????this.list.push(this.inputValue)
????????????????this.inputValue?=?''
?},
?handleDelete:function?()?{
????????????????alert(11);
?}
????????}
????});
</script>
</body>
</html>
2021-01-08
template:'<li>{{content}}?{{index}}</li>',在這里，你沒有綁定事件