冇事来学系--Vue2.0 组件开发详讲（下）

---

theme: scrolls-light

「这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战」。

组件的自定义属性props

props节点是和data、methods等同级的节点，值是一个数组

```

```

使用方法：

1. 在封装组件的时候上写一个props节点，并且设置一个自定义的属性

通过打印this会发现，this指向当前Vue组件的实例，init是对象里面的一个属性，因此可以通过this.init访问

2. 使用上面的组件的时候，在标签内为上面自定义的属性设置属性值，即是为这个组件指定了一个初始值(注意：指定的这个值是字符串)

只需要在设置自定义属性的时候，使用v-bind绑定属性，这样赋值的就是数字型(因为使用v-bind绑定属性时，写的是js代码，js代码中的字符串要加引号，即" '9' ")

3. 在封装的组件上将要使用的初始值渲染到指定的位置

props中的数据，可以直接在模板结构中被使用

---

注意！props节点设置的数据是"只读"的！(可以修改成功，但是会报错)。若想修改props节点里面数据的值，可以将props里面的数据转存到data节点里面，因为data节点里面的数据都是可读可写的(props节点只负责设置初始值，改写的数据是data里面的数据)

---

props的default默认值

在声明自定义属性时，可以通过default来定义属性的默认值

```

```

props的type值类型

在声明自定义属性时，可以通过type来定义属性的值类型

```

```

---

props的required必填项

必填项校验required设置为true，则在使用组件的时候自定义属性必须传值，否则就报错 (即使有默认值也会报错)

非单文件组件和单文件组件

非单文件组件：一个文件中包含n个组件 ---> a.html

单文件组件：一个文件中只包含一个组件 ---> a.vue

```

```

```

```

组件的嵌套

在一个组件中注册和使用另一个组件，这就有了父子关系

```

跋尾

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