Vue之组件间的传值

上一篇文章中的实例用到了子组件向父组件传值的方法，这篇文章通过todolist的实例来说一下子组件向父组件传值和父组件向子组件传值的方法，以及最终实现点击todolist添加的内容实现删除的效果。

既然实现点击删除的效果，那么我们可以先在生成的li标签里面绑定一个click事件，方法写在子组件的methods中：

那么我们的目标是删除掉选中的数据，我们可以这样做，数据是放在父组件中，父组件决定子组件该怎么显示，当我们点击子组件的时候，子组件把对应的内容传给父组件，父组件来改变数据，实现的代码如下：

当我们点击子组件的时候，子组件向外触发一个delete事件，我们可以在父组件监听这个事件：

然后在父组件中定义handleItemDelete方法：

因为要实现点击删除指定的内容项，所以我们要用到splice方法以及数组下标index，这样我们就完成了。

回顾一下

• 父组件向子组件传值

通过v-bind的形式来传递，子组件一定要通过props接收

• 子组件向父组件传值

通过$emit方式，向上一层触发事件，父组件监听子组件的触发事件

完整代码

 效果

完。