组件化开发
1.组件化开发
- 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构[html]、样式[css]、行为
[js]。 - 好处：便于维护，利于复用 → 提升开发效率。
- 组件分类：普通组件、根组件。
- 比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维
护。咱们可以按模块进行组件划分
2.根组件App.vue
2.1根组件介绍
2.2组件是由三部分构成
- 三部分构成
- template：结构 （有且只能一个根元素）
- script: js逻辑
- style： 样式 (可支持less，需要装包)
- 让组件支持less
- style标签，lang=“less” 开启less功能
- 装包: 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父子通信流程
练习
父向子传值步骤：
6.3声明路由–查询参数
传参
接参
声明路由–动态路由参数
传参：App.vue
路由配置：index.js
接参：Home.vue
原文地址：https://blog.csdn.net/R202471/article/details/140826244
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！