一、组件组成
组件最大的优势就是可复用性
当使用构建步骤时,我们一般会将Vue组件定义在一个单独的 .vue文件中,这被叫做单文件组件(简称SFC)
1.组件组成结构
<template>
<div>承载标签</div>
</template>
<script>
export default {}
</script>
<style scoped>
</style>
2.组件的引用
<template>
<TemplateDemo/>
</template>
<script>
import TemplateDemo from "./components/TemplateDemo. vue"
export default {
components: {
TemplateDemo
}
}
</script>
二、组件嵌套关系
组件允许我们将UI划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构
这和我们嵌套HTML元素的方式类似,Vue实现了自己的组件模型,使我们可以在每个组件内封装自定义内容与逻辑
1.创建组件及引用关系
Header
<template>
<h3>Header</h3>
</template>
<style scoped>
h3{
width: 100%;
height:' 100px;
border: 5px solid #999;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
</style>
Main
<template>
<div class="main">
<h3>Main</h3>
<Article />
<Article />
</div>
</template>
<script>
import Article from './Article.vue';
export default {
components: {
Article
}
}
</script>
<style scoped>
.main{
float: left;
width: 70%;
height: 400px;
border: 5px solid #999;
box-sizing: border-box;
border-top: 0px;
}
</style>
}
Aside
<template>
<div class="aside">
<h3>Aside</h3>
</div>
</template>
<script>
export default{
}
</script>
<style scoped>
.aside{
float: right;
width: 30%;
height: 400px;
border: 5px solid #999;
box-sizing: border-box;
border-left: 0; I
border-top: 0;
}
</style>
Article
<template>
<h3>Article</h3>
</template>
<style scoped>
h3{
width: 80%;
margin: 0 auto;
text-align: center;
line-height: 100px;
box-sizing: border-box;
margin-top: 50px;
background: #999;
}
</style>
Item
<template>
<h3>Item</h3>
</template>
<style scoped>
h3{
width: 80%;
margin: 0 auto;
text-align: center;
line-height: 100px;
box-sizing: border-box;
margin-top: 10px;
background: #999;
}
</style>
三、组件注册方式
一个Vue组件在使用前需要先被“注册”,这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册
1.全局注册
main.js
import { createApp } from 'vue'
import App from './App.vue'
import Globalcomponent from "./components/GlobalComponent.vue"
const app = createApp(App);
//必须在中间,顺序不能变
app. component("GlobalComponent", GlobalComponent)
app.mount('#app');
2.局部注册
全局注册虽然很方便,但有以下几个问题:
1 全局注册,但并没有被使用的组件无法在生产打包时被自动移除(也叫“tree-shaking")。如果你全局注册了一个组件,即使它并没有被实际使用,它仍然会出现在打包后的JS文件中
2 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时,不太容易定位子组件的实现。和使用过多的全局变量一样,这可能会影响应用长期的可维护性
局部注册需要使用 components 选项
<template>
<GlobalComponent />
</template>
<script>
import Globalcomponent from ". /components/GlobalComponent. vue"
export default {
components:{
GlobalComponent
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
</style>
四、组件传递数据——props
组件与组件之间不是完全独立的,而是有交集的,那就是组件与组件之间是可以传递数据的传递数据的解决方案就是 props
1.父子组件
父组件
<template>
<h3>ComponentA</h3>
<ComponentB title="传递数据"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
components:{
ComponentB
}
}
</script>
子组件
<template>
<h3>ComponentB</h3>
<p>{{ title }}</p>
</template>
<script>
export default {
props: ["title"]
}
</script>
2.动态数据传递
<template>
<h3>ComponentA</h3>
<ComponentB :title="message"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data(){
return{
message:"动态数据”
}
},
components:{
ComponentB
}
}
</script>
注意事项:props传递数据只能从父级传递到子级,不能反其道而行。
五、组件传递多种数据类型
通过 props 传递数据,不仅可以传递字符串类型的数据,还可以是其他类型,例如:数字、对象、数组等但实际上任何类型的值都可以作为props的值被传递
1.Number
<template>
<h3>ComponentA</h3>
<ComponentB : age="age"/>
</template>
<script>
import ComponentB from ". /ComponentB. vue"
export default {
data(){
return{
age: 20
}
},
components : {
ComponentB
}
}
</script>
<template>
<h3>ComponentB</h3>
<p>{{ age }}</p>
</template>
<script>
export default {
props: ["age"]
}
</script>
Array
<template>
<h3>ComponentA</h3>
<ComponentB : names="names"/>
</template>
<script>
import ComponentB from ". /ComponentB. vue"
export default {
data(){
return{
names: ["iwen", "ime", "frank"]
}
},
components : {
ComponentB
}
}
</script>
<template>
<h3>ComponentB</h3>
<p v-for="(item, index) of names" :key="index">{{ item }}</p>
</template>
<script>
export default {
props: ["names"]
}
</script>
Object
<template>
<h3>ComponentA</h3>
<ComponentB :userInfo="userInfo"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data(){
return{
userInfo:{
name: "iwen",
age: 20
}
}
},
components:{
ComponentB
}
}
</script>
<template>
<h3>ComponentB</h3>
<p>{{ userInfo.name }}</p>
<p>{{ userInfo.age }}</p>
</template>
<script>
export default {
props: ["userInfo"]
}
</script>