<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue 入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="inputValue">
<button @click="add">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) in list"
:content="item"
: Key = "index"
:index="index"
@ the Delete = "del"
>
</ TODO-Item>
<- sub-assembly to pass a value to the parent component passes through this $ emit a parent component to parent component event trigger!.
and then trigger the parent component the method, delete the event it is to click del parent component of intermediate events handelclick subcomponents click ->
<- <li v-for = "(Item, index) in List":! Key = "index" the DblClick = @ " handelClick "> Item {} {} </ Li> ->
</ UL>
</ div>
<Script>
Vue.component ( 'TODO-Item', {
The props: [ 'Content', 'index'],
Template : "<@ Li DblClick = 'handelClick'> {{Content}} </ Li>",
Methods:{
handelClick(){
this.$emit('delete',this.index)
}
}
})
new view ({
el:"#app",
data:{
inputValue:'',
list:[]
},
methods:{
add() {
this.list.push(this.inputValue)
this.inputValue = ''
},
del(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>