在案例中,App组件是List的父组件,List是Item的父组件

(1)将需要传递的数据在App组件中定义并传递给List组件

202110201634722981116339

(2)List组件接受来自父组件的数据并传递给Item子组件

202110201634722987801374

(3)在子组件Item中使用这些数据

202110201634722999138667

(4)当子组件向父组件传递内容

①父组件先给子组件传递一个函数:函数可以接受数据并输出

在子组件需要传递数据给父组件时调用这个函数即可

父组件:
202110201634723014360054

子组件:

202110201634723021547422

使用uuid(保证生成的id是唯一的)

npm i nanoid:比npm i uuid体积小

在组件引入:

202110201634723029607453

完善判断:

202110201634723035101364

使用nanoid函数:

202110201634723044111339