Vue （十五）自定义事件与组件之间方法与属性的传递

Vue代码如下：

App.vue

MyHeader.vue

MyFooter.vue

MyList.vue

MyItem.vue

组件及事件关系説明：

: 和 @ 符号是Vue中的两个特殊符号，用于父组件向子组件传递数据或监听子组件的事件。

: 符号用于向子组件传递数据，表示将父组件中的数据绑定到子组件的props属性上。例如上述代码中的，其中的 :todos="todos" 表示将父组件中的 todos 数据传递给 MyList 组件的 todos 属性。

@ 符号用于监听子组件的事件，表示将父组件中的方法绑定到子组件的自定义事件上。例如上述代码中的，其中的 @checkAllTodo="checkAllTodo" 表示将父组件中的 checkAllTodo 方法绑定到 MyFooter 组件的 checkAllTodo 事件上。当子组件触发了 checkAllTodo 事件时，就会调用父组件中的 checkAllTodo 方法。

:checkTodo 和 :deleteTodo 表示将父组件中的 checkTodo 和 deleteTodo 方法传递给子组件 MyList，作为子组件的 props 属性。

这里的 : 符号是 Vue 中的属性绑定语法，它的作用是将父组件中的数据或方法传递给子组件，这些数据或方法可以在子组件中通过 props 属性获取到。

例如，:checkTodo 将 checkTodo 方法传递给子组件的 checkTodo 属性，子组件可以通过 props 属性获取到这个方法并在需要的时候调用它。同理，:deleteTodo 将 deleteTodo 方法传递给子组件的 deleteTodo 属性，子组件也可以通过 props 属性获取到这个方法并在需要的时候调用它。

组件化及 props使用

1. 组件化编码流程：

    ● 拆分静态组件：组件要按照功能点拆分，命名不要与 html 元素冲突。

    ● 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

       ○ 一个组件在用：放在组件自身即可。

       ○ 一些组件在用：放在他们共同的父组件上（状态提升 ）

2. props 适用于：

     ● 父组件 ==> 子组件 通信

     ● 组件 ==> 父组件 通信（要求父先给子一个函数）

3. 使用 v-model 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！

4. props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但不推荐这样做。