冇事来学系--Vue2.0中组件化编码流程与数据传递

---

theme: Chinese-red

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」

组件之间的数据传递

父传子

父组件写数据，并且在使用子组件标签的时候传递数据；

子组件在props节点中设置自定义属性，用于接收父组件的数据，接收的数据在子组件实例对象vc中，可以直接在模板中使用

子传父

在父组件中 (methods节点下) 写一个接收函数receive，设置一个形参x来接收子组件的数据，并且在使用子组件的时候传递这个函数；(:recieve="recieve")

子组件在props节点设置自定义属性，来接收父组件传来的函数 (props: [recieve]) ，接收的函数在子组件的实例对象vc身上，可以直接在模板中使用，也可以在methods节点中的事件处理函数里面通过this调用这个函数，并把数据作为实参传递( this.receive(数据) )

通过传参实现数据传递

父传孙

通过逐级传递，由父传子，子再传孙

父组件写数据，并且在使用子组件标签的时候传递数据；

子组件的props节点设置自定义属性接收，并且在子组件中使用孙组件的时候写入这个属性来传递

孙组件的props节点设置自定义属性接收子组件传来的数据，接收的数据在孙组件的实例对象vc上，可以直接在模板中使用

数据传递

1. 实现静态组件：抽取组件，使用组件实现静态页面的效果
2. 展示动态数据

1. 1. 数据类型、名称是啥

一堆数据用数组来存储，每一个数据又很多属性则用对象来表示

1. 2. 数据保存在哪个组件：

1. 1. 1. 数据是一个组件在用 --> 放在组件自身即可 1. 数据是一些组件在用 --> 放在他们共同的父组件上(状态提升)

注意：使用v-model时要注意不能绑定props里面的值，因为props里面的值是不允许被修改的

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

一般数据在哪里，操作数据的方法就在哪里(增删改查)

nanoid的使用--> 用于生成id

nanoid是一个函数，直接调用就会生成一个唯一的字符串

安装nanoid的库 ---> npm i nanoid

引入nanoid ---> import {nanoid} from 'nanoid' (nanoid使用了分别暴露)

使用： nanoid( )

4. 交互，从绑定事件监听开始

组件化编码流程

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖