学习笔记——Vue的组件化开发

一、什么是组件化开发

1.定义

Vue的组件化开发允许开发者将页面拆分成可重用、独立的组件，每个组件包含自己的 HTML、CSS 和 JavaScript 逻辑。

2.好处

组件化开发有助于提高代码的可维护性和重用性。便于维护，利于复用 → 提升开发效率。

3.组件的基本结构

组件由三部分构成：

• 模板（template）: 定义组件的 HTML 结构。（注意:有且只能有一个根元素）
• 脚本（script）: 包含组件的逻辑，如数据和方法。
• 样式（style）: 定义组件的 CSS 样式，可以是全局的或作用于组件内部的（通过 scoped 属性）。

二、普通组件的注册和使用

1.局部注册

（1）特点

在单个组件中注册子组件 ，只能在注册的组件内使用。

（2）步骤

1. 创建 Vue 文件。
2. 在使用的组件内先导入子组件。
3. 注册子组件。
4. 使用子组件。
   
   

（3）使用方式：

当成html标签使用即可 ，即<组件名>

（4）注意：

组件名规范→大驼峰命名法， 如 HmHeader

（5）语法

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default   
  // 局部注册
  components: {
    '组件名': 组件对象,
    HmHeader:HmHeaer,
    HmHeader
  }
}

（6）示例代码

创建子组件

在父组件中导入并注册子组件

2.全局注册

（1）特点

全局注册的组件，在项目的任何组件中都能使用

（2）步骤

1. 创建 Vue 组件文件。
2. 在项目的入口（main.js）文件中导入并注册组件。
3. 在任何需要的地方使用该组件。
   
   

（3）使用方式：

当成html标签使用即可 ，即<组件名>

（4）注意：

组件名规范→大驼峰命名法， 如 HmHeader

（5）语法

Vue.component('组件名', 组件对象)

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

（6）示例代码

创建子组件

在main.js中导入并全局注册子组件

import Vue from 'vue';
import App from './App.vue';
// 导入子组件
import ChildComponent from './ChildComponent.vue';

// 全局注册子组件
Vue.component('ChildComponent', ChildComponent);

new Vue({
  render: h => h(App),
}).$mount('#app');

在任何需要的地方使用子组件