小白学习vuejs-04--父子组件通信一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

自学前端

前文
- 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是vue中的父子组件通信也是非常重要的
- 这是基于我学习的笔记而来的文章

组件是一个单独功能模块的封装:
- 这个模块有属于自己的HTML模板, 也应该有属于自己的数据data
组件中的数据是保存在哪里呢?顶层的Vue实例中吗?
- 我们先来测式一下, 组件中不能直接访问Vue实例中的data
- 我们发现不能访问, 而且即使可以访问, 如果将所有的数据都放在Vue实例中, Vue实例将会变得非常臃肿
- 结论: Vue组件应该有自己保存数据的地方
组件自己的数据存放在哪里呢?
- 组件对象也有一个data属性(也可以有methods等属性, 下面我们有用到)
- 只是这个data属性必须是一个函数
- 而且这个函数返回一个对象, 对象内部保存着数据
为什么组件data必须是函数.
- 因为组件是需要复用的如果使用的是同一个data中的变量, 就会发生连锁反应

在上一个小节中, 我们提到了组件是不能引用父组件或者Vue实例的数据的.
但是, 在开发中, 往往一些数据确实需要从上层传递到下层
- 比如在一个页面中, 我们从服务器请求到了很多的数据
- 其中一部分数据, 并非是我们整个页面的大组件来展示的, 而是需要下面的子组件进行展示
- 这个时候, 并不会让子组件再次发送一个网络请求, 而是直接让大组件(父组件)将数据传递个小组件(子组件)
如何进行父子组件间的通信呢?Vue官方提到
- 通过props向子组件传递数据(props->properties属性)
- 通过$emit 事件向父组件发送消息
在组件中, 使用选项props来声明需要从父级接收到的数据
props的值有两种方式:
- 方式一: 字符串数组, 数组中的字符串就是传递时的名称
- 方式二: 对象, 对象可以设置传递时的类型, 也可以设置默认值等

props用于父组件向子组件传递数据, 还有一种比较常见的是子组件传递数据或事到父组件中
什么时候需要自定义事件
- 当子组件需要向父组件传递数据时, 就要用到自定义事件了
- 当我们之前学习的v-on不仅仅可以用于监听DOM事件, 也可以用于组件间的自定义事件
自定义事件的流程
- 在子组件中, 通过$emit()来触发事件
- 在父组件中, 通过v-on来监听子组件事件
在父组件模板中不支持驼峰

c-info

- ```` this.$children是一个数组 类型, 它包含所有子组件对象

slot翻译为插槽:
- 在生活中很多地方都有插槽, 电脑的USB插槽, 插板中的电源插槽
- 插槽的目的是让我们原来的设备具备更多的扩展性
- 比如电脑的USB我们可以插入U盘, 硬盘, 手机, 音响, 键盘, 鼠标等等
组件的插槽
- 组件的插槽也是为了让我们封装的组件更加具有扩展性
- 让使用者可以决定组件内部的一些内容到底展示什么
栗子: 移动网站中的导航栏
- 移动开发中, 几乎每个页面都有导航栏
- 导航栏我们必然会封装成一个插件, 比如nav-bar组件
- 一旦有了这个组件, 我们就可以在多个页面中复用了
但是, 每个页面的导航是一样的吗?NO
如何去封装这类组件呢?
- 他们也有很多区别, 但是也有很多共性.
- 如果, 我们每一个单独去封装一个组件, 显然不适合: 比如每个页面都返回
  
  这部分内容我们就要重复去封装
- 但是, 如果我们封装成一个, 好像也不合理: 有些中间是搜索, 有些是文字等等
如何封装合适呢?抽取共性, 保留不同
- 最好的封装方式就是将共性抽取到组件中, 将不同暴露为插槽
- 一旦我们预留了插槽, 就可以让使用这根据自己的需求, 决定插槽中插入什么内容
- 是搜索框, 还是文字, 还是菜单, 由调用者自己来决定

作用域插槽是slot一个比较难以理解的点, 而且官方文档说的又有点不清晰
这里, 我们用一句话对其中做一个总结, 然后我们在后续的案例中来体会
- 父组件替换插槽的标签, 但是内容由子组件来提供(父组件对子组件展示的内容不满意, 父组件获取内容容改变展现方式)