关于vue中的$emit用法

子组件使用$emit触发父组件定义的事件

1.在父组件中使用import引入子组件

import TodoItem from './components/TodoItem'

2.在父组件中声明

components:{
		'todo-item':TodoItem
	}

3.使用子组件

<todo-item v-for="(item,index) of list" :content="item" :key="index" :index="index" ></todo-item>

4.子组件定义父组件用到的模板并绑定点击事件

<template>
    <li class= "item" @click="handleDelete">{{content}}</li>
</template>

5.当点击事件被触发，子组件中开始使用$emit向父组件“发送信号”；
其中delete为父组件定义的函数，this.index为传递的参数

` handleDelete(){
      this.$emit('delete',this.index)
    }`

6.在父组件引用子组件处添加函数@delete=“handleDelete”；
其中delete为子组件中定义函数，handleDelete为父组件定义函数，用于接收子组件传过来的值并进行相应操作

<todo-item v-for="(item,index) of list" :content="item" :key="index" :index="index" @delete="handleDelete"></todo-item>

以下为父组件需要执行的操作

handleDelete(){
			this.list.splice(this.index, 1)
		}