19-案例

案例

向子组件传递对象

使用v-bind形式向子组件传递对象：

子组件接收对象，并进行显示：

生成唯一流水号

可以使用UUID生成唯一流水号，但是UUID组件比较重，可以使用轻量版的nanoid代替：

npm i nanoid

用法：

import {nanoid} from 'nanoid'
let id = nanoid();

调用父组件的方法，给父组件传值

父组件定义方法，并传递给子组件：

子组件中接收函数，并在需要时调用：

复选框的操作

方式1：

使用:checked显示复选框是否被选中。使用@change绑定事件当选择状态变化时触发方法

方式2：

使用v-model双向绑定：

总结

组件化编码流程：

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

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

   a. 一个组件在用：放在组件自身即可
   b. 一些组件在用：放在他们共同的父组件上（即状态提升）

3. 实现交互：从绑定事件开始

props适用于：

• 父组件到子组件的通信
• 子组件到父组件的通信（要求父组件先给子组件传递一个函数）

使用v-model是要注意：v-model绑定的值不能是props传过来的值，因为props是不可以修改的

props传过来的值如果是对象类型的值，修改对象中的属性时vue不会报错，但是不推荐这么做。

若有收获，就点个赞吧

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！