【Vue 學習筆記】元件化

元件是什麼？

在我新手剛學會寫程式碼的時候，我只想著畫面的東西要完整，所以拼了命的往裡面塞資料，外觀看似完整，但是看裡面（程式碼），真的是一團亂···，當專案越來越大的時候，同樣的重複性也越多、想當然程式碼也越來越冗長，這時把每個元件獨立出來，並且重複使用，有需要的時候再把它拿出來使用，真的會降低很多眼花撩亂的時間。

元件化優點：

• 增加程式碼的可複用性
• 避免單一檔案過大
• 易於管理及協作
• 元件功能獨立

註冊元件及傳遞事件：

全域註冊

• 任何子元件都可使用

第一種寫法

const app = Vue.creatApp({
    data(){
        return {
            text:'外部text1'
        };
    },
})
//串接
.component('item1',{
  data(){
    return{
        text:'內部text1'
    };
},
template:`<div class="btn btn-primary"></div>`
})

app.mount('#app');

第二種寫法

const app = Vue.creatApp({
    data(){
        return {
            text:'外部text1'
        };
    },
})
app.component('item2',{
    data(){
        return{
            text:'內部text2'
        };
    },
    template:`<div class="btn btn-primary"></div>`
})
app.mount('#app');

區域註冊

• 任何子元件都可使用

//物件結構
const item3 = {
    data(){
        return{
            text:'內部text3'
        };
    },
    template:`<div class="btn btn-primary"></div>`
}

const app = Vue.creatApp({
    data(){
        return {
            text:'外部text1'
        };
    },
    components:{
        item3
    }
})

app.mount('#app');

模組化

會把元件獨立出來一個檔案（ js 檔案），透過 ES Module 匯入

item4.js檔案

//物件結構
export default {
    data(){
        return{
            text:'外部文字'
        };
    },
    template:`<div class="btn btn-primary"></div>`
}

選擇要匯入的檔案

import item4 from `./item4.js`

const app = Vue.creatApp({
    data(){
        return {
            text:'外部text1'
        };
    },
    components:{
        item4
    }
})

app.mount('#app');

props

• 外層向內層元件傳遞資料
  • 單向數據流：props 只能讀取不能更改資料

const app = Vue.creatApp({
    data(){
        //外層
        return {
            imageUrl:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRq6HRomJWKtFDvOelkYHwwjA-xe7Usq0JgWRkQDGWy&s'
        };
    },
})
app.component('image',{
    //內層
    props:['url'],
    template:`<img :src="url" alt="">`
})
app.mount('#app');

在想要插入元件圖片的檔案

//（如 url 名稱有使用小駝峰形式：記得把大寫改成小寫加 -）
<image :url="imageUrl"></image>

emit

• 內層向外層傳遞事件

步驟一：先定義外層接收的方法

const app = Vue.creatApp({
    data(){
        //外層
        return {
            num:0
        };
    },
    methods:{
        //外層接收的方式
        addNum(){
            this.num++
        }
    }
})
app.component('button',{
    methods:{
       ...
    },
    template:`<button type="button">add</button>`
})
app.mount('#app');

步驟二：再定義內層觸發 emit 的方法

const app = Vue.creatApp({
    data(){
        //外層
        return {
            num:0
        };
    },
    methods:{
        addNum(){
            this.num++
        }
    }
})
app.component('button',{
    //內層觸發 emit 的方法
    methods:{
        click(){
            this.$emit('emit-num')
        }
    },
    template:`<button type="button" @click="click">add</button>`
})
app.mount('#app');

步驟三，在想要的檔案中加入按鈕，使用 v-on 觸發外層方法

<button @emit-num="addNum"></button>