vue(7) todoList案例

一。拆分组件

将本次案例分为Header，List，Item，Footer，其中Item为List的子组件

二：传递组件

我将数据写在App.vue中，为了在List，Item收到数据，需要将数据传递过去并在子组件中写入props:[ "xxx" ]，Item中的数据只传递了todo，是在List组件中循环了4个Item

<List :todoList="todoList" :checkTodo="checkTodo" :deleteTodo2="deleteTodo2"></List>

<Item  v-for="todo in todoList" :key="todo.id" :todo="todo" :checkTodo="checkTodo" :deleteTodo2="deleteTodo2"></Item>

三：涉及组件的一些方法和不同组件修改数据要对其他组件产生影响，也可以用到props配置项，子组件向父组件传值时，要父组件给子组件一个函数，然后在子组件通过某些方法调用这个函数将值传回去，例如下面代码，将函数传给Header，再在Header中调用这个函数

todoAdd(key,x) {
		this.todoList.unshift(x)
	},

 兄弟组件之间要想进行通信，目前所有方法都是写在App.vue中，通过子组件向父组件传值完成每个小功能，因为数据通过App.vue时会重新进行计算，所以每个组件拿到的值都是最新值，但是要想直接通过两个兄弟组件进行传值，又该如何操作呢