Vue3组件概念及使用方式

Vue 3 是 Vue.js 框架的下一个主要版本，它带来了许多新特性和改进，使得 Vue.js 更强大、更灵活。Vue 3 引入了 Composition API，这是一种新的组织组件逻辑的方式。它允许你通过逻辑功能来组织代码，而不是通过固定的选项对象。这使得代码更容易复用和组织。

组件的概念

• 组件：

  • 是带有名称、可复用实例
  • 通常一个应用会以一棵嵌套的组件树的形式来组织
  • 可以拥有自己独立的结构、样式、逻辑

• 组件的命名方式与规范

  • 定义组件可以通过驼峰式和小写下划线式
  • 调用组件推荐使用小写下划线式

• 根组件

  • app容器可以看成根组件
  • 所以根组件跟普通组件都具备相同的配置信息
    • data
    • methods
    • computed
    • ...

• 局部组件与全局组件

  • 局部组件只能在指定组件内适用
  • 全局组件可以再app容器下的任意位置进行使用

组件之间相互通信

• 父传子

  • 通过props

• 子传父

  • 通过emits

• 双向流动

  • v-model实现

组件的属性与事件

• 默认传递行为
  • 不通过props接收的话，属性会挂载到组件容器上
  • 事件也会直接挂载到组件容器上
  • 可以通过inheriAttrs选项阻止这种行为，设置为false，避免组件属性和事件向容器传递
  • 可通过$attrs内置语法，给指定元素传递属性和事件
    • $attrs包含容器组件的所有属性
    • $attrs可实现组件之间的间接通信

组件的内容组合与分发

• 插槽

  • Vue通过插槽slot方式进行分发处理的

• 插槽类型

  • 渲染作用域
  • 具名插槽
    • 可以简写为#
  • 作用域插槽