十六、Vue 组件

文章目录

• 一、组件的概念和优势
• 二、创建组件
• • 全局组件的定义和注册
  • 局部组件的定义和注册
• 三、组件通信
• • 父子组件通信
  • • 父组件向子组件传递数据
    • 子组件向父组件传递事件
  • 非父子组件通信
  • • 事件总线（EventBus）的使用
    • Vuex（简单介绍用于状态管理，在组件通信中的应用）
• 四、插槽（Slot）
• • 匿名插槽（默认插槽）的使用
  • 具名插槽（如何定义和使用有名称的插槽）
  • 作用域插槽（传递数据到插槽内容的方式）

一、组件的概念和优势

  在 Vue 的世界里，组件是构成应用程序的基本单元。组件化开发是一种将复杂的用户界面拆分成一个个独立、可复用的小块的开发思想。
  组件化开发带来诸多好处。首先，代码复用性大大提高。比如，一个网站的导航栏，将其定义为一个组件后，在多个页面中都能直接使用。其次，提高了维护性。当导航栏的样式或功能需要修改时，只需要在导航栏组件中进行更改，而不需要在所有使用到导航栏的页面中逐一修改。

二、创建组件

全局组件的定义和注册

  使用Vue.component方法来定义和注册全局组件。全局组件在整个 Vue 应用中都可以使用。

// 定义一个名为my - component的全局组件
Vue.component