Java全栈课程之Vue3详解———组件（一）

一、组件组成

组件最大的优势就是可复用性

当使用构建步骤时,我们一般会将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>