<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>todolist組件之間傳值</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<todo-item
:content="item"
:index="index"
v-for="(item,index) in list"
@delete="handleItemDelete">
</todo-item>
</ul>
</div>
<script>
/*--子組件-*/
var TodoItem={
props:['content','index'],
template:"<li @click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick:function(){
console.log('222')
this.$emit("delete",this.index)
console.log(this.index)
}
}
}
/*--父組件-*/
var app=new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
list:['第一','第二','第三','第四','第五'],
inputValue:"增加一條"
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue)
this.inputValue=""
},
handleItemDelete:function(index){
console.log("444")
this.list.splice(index,1)
console.log('555')
}
}
})
</script>
</body>
</html>
注：@delete
組件之間傳值
