基于todolist功能——对组件进行拆分(组件与实例的关系）

todolist功能开发

下述例子实现功能：在input框输入内容的时候，通过点击提交按钮将内容发布在列表之中

页面渲染结果

代码解析：

• 通过v-model对数据进行双向绑定，这样输入框里每一次输入的内容都会被存到data的inputValue值当中。
• 通过v-on：click在提交按钮上绑定了一个名为Submit的方法函数，在每一次点击提交按钮时，Submit方法都会将inputValue的值通过push的方法添加到list中，之后再把inputValue中的值给清空。
• 最后 ul列表通过v-for的方法对list中的数据进行循环展示。

Vue中的组件拆分

下面对上述例子中列表的li标签进行组件化

1.全局组件:所有实例都能使用的组件

页面渲染结果

代码解析

• 通过Vue中创建组将的方法：Vue.component创建了一个名为todo-item的全局组件，这样就可以在页面中通过<todo-item></todo-item>标签的形式使用该组件。
• 组件中prop是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：
• 子组件通过名为content的属性接收父组件传递过来的item的值，再在template中与模板进行拼接，最后展示在页面中。（注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来）

2局部组件:只能在注册该组件的实例中使用

代码解析

• 在vue实例的我们注册了一个名为Todoitem的局部组件，并且把组件命名为todo-item，这样我们就可以在实例中通过<todo-item></todo-item>标签使用该组件。

组件和实例的关系

每个组件都是一个vue的实例，一个vue项目是由无数个vue实例（组件）组成的。
因为组件也是实例，所以每个组件都可以有自己的methods，data等。

todolist删除功能

通过上述例子，我们可以知道父组件向子组件传值是通过属性的方式来传值。

那么如果想要删除子组件的某一条数据，那么我们就得去删除父组件里对应的那一条数据，那么子组件如何告诉父组件要删除的是那一条数据？

方法：通过发布订阅形式，子组件发布事件，父组件监听订阅该事件。

代码功能：发布后通过点击对应的li标签，实现该标签的删除

代码分析：

• 子组件在获取数据的同时，添加一个名为index的属性，用来获取数据在例表中所在的位置。
• 在每一条li标签上绑定一个名为handleClick的函数事件，当点击对应的li标签时，触发delete事件并且传递数据的下标值（index）。
• 当父组件监听到子组件的delete事件发生的时候，获取到index并执行handleDelete事件，通过list.splice方法删除list中下标为index的元素。

本文内容均来自个人总结，并不代表完全正确，如有错误请大神指出。