vue元件介紹及應用

阿新 • • 發佈：2022-12-09

一個.vue檔案就是一個元件

元件都是由三部分組成：html結構（html結構都是在template標籤中）、js邏輯、css樣式

1）template只能解析一個根標籤
2）js邏輯都是在script標籤中，必須設定匯出，export default {...}
3）css樣式都是在style標籤中，必須設定scoped屬性，是樣式元件化

<template>
    <div class="first-cp">
         <h1>第一個元件</h1>
    </div>
</template>

<script>
    // .vue檔案類似於模組，可以直接相互匯入，所以在元件內部要設定匯出
    export default {

    }
</script>

<style scoped>
    /* scoped可以使樣式元件化，只在自己內部起作用 */

</style>

根元件佔位渲染頁面元件

<!--
1) App.vue是專案的根元件，是唯一由main.js載入渲染的元件，就是替換index頁面中的<div id="app"></div>的佔位標籤
2) 實際開發中App.vue檔案中，只需要書寫下方五行程式碼即可（可以在此基礎上額外增加其他程式碼）
3）router-view是前臺路由佔位標籤，由router外掛控制，可以在router的配置檔案中進行配置
4) router-view就是根據router在index.js中配置的路由關係，完成指定路徑匹配指定頁面元件，進行渲染
5) router-view會被不同的頁面元件替換，就形成了頁面跳轉
-->

<template>
    <div id="app">
        <!-- 前臺路由佔位標籤，末尾的/代表單標籤的結束 -->
        <router-view />
    </div>
</template>

元件資料區域性化處理

"""
1）不管是頁面元件還是小元件，都可能會被多次複用
2）複用元件，其實就是複用元件的 頁面結構、頁面樣式、頁面邏輯
3）但是頁面上的資料需要區分（被複用的兩個元件資料多少是有區別的），所以元件的資料要做區域性化處理
4）藉助函式可以產生區域性作用域的特點，為每一次複用元件產生一個獨立的作用域
語法:
data () {
    return {
        // 資料們
    }
}
"""

案例：

子元件

<template>
    <div class="beat" @click="count += 1">
        {{ count }}下
    </div>
</template>

<script>
    export default {
        name: "Beat",
        // 不管是頁面元件還是小元件，都可能被複用，頁面結構與樣式都可以採用一套，但是資料一定要相互獨立
        data () {
            return {
                count: 0
            }
        }
    }
</script>

<style scoped>
    .beat {
        width: 100px;
        height: 100px;
        background-color: orange;
        text-align: center;
        line-height: 100px;
        border-radius: 50%;
    }
</style>

父元件

<template>
    <div class="home">
        <Beat/>
        <Beat/>
    </div>
</template>
<script>
    import Beat from '@/components/Beat'
    export default {
        components: {
            Beat,
        }
    }
</script>

父元件傳遞資料給子元件

"""
一、元件傳參 - 父傳子
1）在子元件內部通過props設定元件的自定義屬性
    props: ['abc', 'goods']
2）在父元件中渲染子元件是對自定義屬性賦值即可
    <GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/>
"""

子元件：

<template>
    <div class="goods-box">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>

<script>
    export default {
        name: "GoodsBox",
        // 在元件內部通過props定義元件的自定義屬性
        props: ['abc', 'goods'],
    }
</script>

<style scoped>
    .goods-box {
        width: 260px;
        height: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin: 20px;
        float: left;
        overflow: hidden;
        text-align: center;
    }
    img {
        width: 260px;
        height: 260px;
    }
</style>

父元件：

<template>
    <div class="goods">
        <div class="main">
            <!-- 在使用子元件是對自定義屬性賦值即可 -->
            <GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods" />
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";

    let goods_list = [
        {
            img: require('@/assets/img/001.jpg'),
            title: '小貓',
        },
        {
            img: require('@/assets/img/004.jpg'),
            title: '小狗',
        },
    ];

    export default {
        name: "Goods",
        data () {
            return {
                goods_list,
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>

子元件傳遞資料給父元件

"""
二、元件傳參 - 子傳父
前提：子元件是被父元件渲染的，所以子元件渲染要晚於父元件
1）子元件一定要滿足一個條件，才能對父元件進行傳參（某個時間節點 === 某個被啟用的方法）
    eg：i）子元件剛剛載入成功，給父元件傳參 ii）子元件某一個按鈕被點選的時刻，給父元件傳參 iii）子元件要被銷燬了，給父元件傳參

2）在子元件滿足條件啟用子元件的方法中，對父元件發出一個通知，並將資料攜帶處理（自定義元件事件）
    <div class="goods-box" @click="boxClick"></div>
    methods: {
        boxClick () { this.$emit('receiveData', this.goods.title, '第二個資料', '第三個資料') }
    }

3）在父元件渲染子元件時，為自定義事件繫結方法
    <GoodsBox @receiveData="recFn"/>

4）在父元件實現繫結方法時，就可以拿到子元件傳參的內容（接收到了通知並在父元件中相應）
        methods:{
            recFn(title,data2,data3){
                console.log('接收到了'+title);
                this.goodsTitle = title
            }

注意：元件標籤不能繫結系統定義的事件，沒有意義，子元件的事件都是在自己內部完成
"""

子元件

<template>
    <div class="goods-box" @click="boxClick">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>

<script>
    export default {
        props: ['abc', 'goods'],
        methods: {
            boxClick () {
                // 通知父級 - 自定義元件的事件 'receiveData'，然後把資料 this.goods.title 傳給父元件
                this.$emit('receiveData', this.goods.title)
            }
        }
    }
</script>

父元件

<template>
    <div class="goods">
        <div class="main">
            <!-- 實現自定義事件，接收子元件通知的引數 -->
            <GoodsBox v-for="goods in goods_list" @receiveData="recFn"/>
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";
    export default {
        name: "Goods",
        data () {
            return {
                goodsTitle: '哪個',
            }
        },
        methods: {
            recFn(title) {
                console.log('接收到了' + title);
                this.goodsTitle = title;
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>

元件的生命週期鉤子

"""
一、元件的生命週期：一個元件從建立到銷燬的整個過程
二、生命週期鉤子：在一個元件生命週期中，會有很多特殊的時間節點，且往往會在特定的時間節點完成一定的邏輯，特殊的時間節點可以繫結鉤子
注：鉤子 - 提前為某個事件繫結方法，當滿足這個事件啟用條件時，方法就會被呼叫 | 滿足特定條件被回撥的繫結方法就稱之為鉤子
"""