十六、Vue 组件
文章目录
- 一、组件的概念和优势
- 二、创建组件
-
- 全局组件的定义和注册
- 局部组件的定义和注册
- 三、组件通信
-
- 父子组件通信
-
- 父组件向子组件传递数据
- 子组件向父组件传递事件
- 非父子组件通信
-
- 事件总线（EventBus）的使用
- Vuex（简单介绍用于状态管理，在组件通信中的应用）
- 四、插槽（Slot）
-
- 匿名插槽（默认插槽）的使用
- 具名插槽（如何定义和使用有名称的插槽）
- 作用域插槽（传递数据到插槽内容的方式）
一、组件的概念和优势
在 Vue 的世界里，组件是构成应用程序的基本单元。组件化开发是一种将复杂的用户界面拆分成一个个独立、可复用的小块的开发思想。
组件化开发带来诸多好处。首先，代码复用性大大提高。比如，一个网站的导航栏，将其定义为一个组件后，在多个页面中都能直接使用。其次，提高了维护性。当导航栏的样式或功能需要修改时，只需要在导航栏组件中进行更改，而不需要在所有使用到导航栏的页面中逐一修改。
二、创建组件
全局组件的定义和注册
使用Vue.component方法来定义和注册全局组件。全局组件在整个 Vue 应用中都可以使用。
// 定义一个名为my - component的全局组件
Vue.component