vue组件化开发

vue组件化开发

认识组件化：组件化就是将一个复杂的页面拆分出来逐个实现可复用的组件，再将其放在整体当中。

• 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。

• 组件化我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

注册组件的基本步骤：

• 创建组件构造器 Vue.extend()
• 注册组件 Vue.componene()
• 使用组件 或

全局组件和局部组件

• 当我们通过调用Vue.component()注册组件时，组件的注册是全局的。这意味着该组件可以在任意Vue示例下使用。

• 如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件

为什么data在组件中必须时一个函数和？

• 首先，如果不是一个函数。vue 直接就会报错
• 其次，原因是在于vue让吗，每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响

父子组件的通信：

• 通过props向子组件传递数据

  props数据验证

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oYiNjqvf-1635242486348)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20211026173417964.png)]

• 通过事件向父组件发送消息

  p在子组件中，通过$emit()来触发事件。

  p在父组件中，通过v-on来监听子组件事件。

父子组件的访问方式：

• p父组件访问子组件：使用$children或$refs
• p子组件访问父组件：使用$parent

slot插槽：

组件是可复用的但是当组件在两个不一样的地方就可以使用slot来实现。

• 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。

• 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。

• 是搜索框，还是文字，还是菜单。由调用者自己来决定。

slot的基本使用

• 在子组件中，使用特殊的元素就可以为子组件开启一个插槽。
• 该插槽插入什么内容取决于父组件如何使用。

组件：

<div>
    <slot>我是默认值</slot>
</div>

实例：

<div>
    <my-cpn></my-cpn>//这里没有传值会显示默认值
    <my-cpn>我是自定义的值</my-cpn>
</div>

• 在子组件中，使用特殊的元素就可以为子组件开启一个插槽。

• 该插槽插入什么内容取决于父组件如何使用。

• 中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容

具名插槽n当子组件的功能复杂时，子组件的插槽可能并非是一个。

• 比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。

• 那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？

• 这个时候，我们就需要给插槽起一个名字

• 如何使用具名插槽呢？

  • 非常简单，只要给slot元素一个name属性即可

作用域插槽：

作用域插槽的使用：