话不都说,上代码:
Vue.component('todoItem',{
props:['item','index'],
template:`<li @click="$emit('deleteitem',this.index)">{{index}}{{item}}</li>`
})
在做子组件向父组件进行传值的时候,$emit()犯法传递的参数的时候,我把参数写成this.index。我想知道如果这样传值的话,这里的this.index指的是什么?
完整的代码
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用组件改造todolist</title>
<link rel="stylesheet" href="./main.css">
<script src="./vue.js"></script>
</head>
<body>
<h1>使用组件改造todolist</h1>
<hr>
<p><b></b></p>
<div id="app">
<input type="text" v-model='inputValue' @keyup.enter='handleClick'>
<button @click='handleClick'>提交</button>
<ul>
<todo-item
v-for='(item,index) in list'
:item='item'
:key='index'
:index='index'
@deleteitem='deleteli'
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todoItem',{
props:['item','index'],
template:`<li @click="$emit('deleteitem',this.index)">{{index}}{{item}}</li>`
})
var app = new Vue({
el:'#app',
data:{
list:[],
inputValue:''
},
methods:{
handleClick(){
this.list.push(this.inputValue);
this.inputValue=''
},
deleteli(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>