vue组件的$emit()在传递参数的时候的一个小问题

话不都说,上代码:
Vue.component('todoItem',{

        props:['item','index'],
        template:`<li @click="$emit('deleteitem',this.index)">{{index}}{{item}}</li>`
    })

在做子组件向父组件进行传值的时候,$emit()犯法传递的参数的时候,我把参数写成this.index。我想知道如果这样传值的话,这里的this.index指的是什么?

完整的代码

clipboard.png

完整代码
<!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>

阅读 7.2k
2 个回答
this.index === index // true

<li @click="$emit('deleteitem',index)">{{index}}{{item}}</li>

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题