组件化开发

news2024/9/21 19:28:16

1.组件化开发

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构[html]、样式[css]、行为
[js]。
好处：便于维护，利于复用 → 提升开发效率。
组件分类：普通组件、根组件。
比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维
护。咱们可以按模块进行组件划分

2.根组件App.vue

2.1根组件介绍

在这里插入图片描述

2.2组件是由三部分构成

三部分构成
1. template：结构（有且只能一个根元素）
2. script: js逻辑
3. style：样式 (可支持less，需要装包)
让组件支持less
1. style标签，lang=“less” 开启less功能
2. 装包: yarn add less less-loader -D 或者npm i less less-loader -D

3.普通组件的注册使用

普通组件的注册有两种方式。
（1）局部注册：
（2）全局注册

3.1普通组件的注册使用-局部注册

1.特点：
只能在注册的组件内使用
2.步骤：

创建.vue文件（三个组成部分）
在使用的组件内先导入再注册，最后使用
3.使用方式：
当成html标签使用即可 <组件名></组件名>
4.注意：
组件名规范 —> 大驼峰命名法，如 AAAHeader
5.语法：

// 导入需要注册的组件
// import 组件对象 from ‘.vue文件路径’
import AAAHeader from ‘./components/AAAHeader’
export default {• // 局部注册
components: {
‘组件名’: 组件对象,
AAAHeader:AAAHeader,
AAAHeader
}
}

6.练习
自定义组件：components

<template>
<div>
  <p>
    我是-Head
  </p>
</div>
</template>
<script >
</script>
<style scoped>
div{
  width: 500px;
  height: 50px;
  background-color: palevioletred;
}
p{
  line-height: 50px;
}
</style>

导入组件：App.vue

<template>
  <div id="app">
<!--   使用-->
    <Head></Head>
  </div>
</template>

<script>
// 导入组件
import Head from './components/Head.vue'
export default {
  name: 'app',
  // 注册该组件
  components: {
  //   名称：组件名
    Head:Head
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这里插入图片描述

3.2 普通组件的注册使用-全局注册

1.特点：
全局注册的组件，在项目的任何组件中都能使用
2.步骤
1. 创建.vue组件（三个组成部分）
2. main.js中进行全局注册
3.使用方式
当成HTML标签直接使用
<组件名></组件名>
4.注意
组件名规范 —> 大驼峰命名法，如 AAAHeader
5.语法
Vue.component(‘组件名’, 组件对象)
6.练习
自定义一个通用组件：components

<script setup>
</script>
<template>
<div>
  <el-button type="primary">通用</el-button>
</div>
</template>
<style scoped>
</style>

导入组件：main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入组件页面
import MyButton from "@/components/MyButton.vue";
Vue.config.productionTip = false
// 注册全局组件
Vue.component('MyButton',MyButton)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

使用在这里插入图片描述

4.组件通信

1.什么是组件通信？
组件通信，就是指组件与组件之间的数据传递

组件的数据是独立的，无法直接访问其他组件的数据。
想使用其他组件的数据，就需要组件通信
2.组件之间如何通信

3. 组件关系分类

3.1父子通信流程

练习

父向子传值步骤：
- 给子组件以添加属性的方式传值
- 子组件内部通过props接收
- 模板中直接使用 props接收的值
  3.2子向父通信流程
  
  子向父传值步骤
  - $emit触发事件，给父组件发送消息通知
  - 父组件监听$emit触发的事件
  - 提供处理函数，在函数的性参中获取传过来的参数
  5.路由介绍
  
  5.1思考
  
  6.路由的基本使用
  
  6.1声明式使用路由
  定义组件
  
  路由渲染
  
  配置路由
  
   6.2编码式使用路由