vue3 Composition API 學習手冊-17 組件的資料和函數

第 12 屆 iThome 鐵人賽

DAY 17

自我挑戰組

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 17 篇

12th鐵人賽 vue3 vue 3

史坦利

2020-09-29 10:07:04

1149 瀏覽

分享至

呈上一篇組件設計的文章，今天來介紹組件資料和方法的應用，在使用組件的時候，各個子層可以有獨立的data與methods不會互相干擾，不過需要注意使用的方式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        button {
            padding: 10px;
        }

        h2 {
            font-size: 18px;
            font-family: "微軟正黑體";
        }
        
    </style>
</head>

<body>
    <div id="app">
        <!-- <h2>Order quantity : {{ total }}</h2> -->
        <vuebutton title="iPhone" :start="30"></vuebutton>
        <vuebutton title="iPad" :start="100"></vuebutton>
    </div>
</body>

</html>

<script>
const { reactive } = Vue;
const myVue = Vue.createApp({});
myVue.component("vuebutton", {
    props: {
        title: {
            type: String,
            required: true,
        },
        start: {
            type: Number,
            default: 0,
        },
    },
    template: `<button @click="minus">{{ state.title }} 庫存 {{ state.start }} 件</button>`,
    setup(props){
        const state = reactive({
            title: props.title,
            start: props.start,
        })
        function minus(){
            if (state.start <= 0) {
                state.start = 0;
            } else {
                state.start--;
            }
        }
        return{ state, minus }
    },
})
myVue.mount("#app");
</script>

這面的案例我們透過使用者按下按鈕之後，去刪減庫存的數量，可以看到兩邊的數據是分開進行的，程式中的setup中有帶入props參數，透過處理之後再return出來。

範例檔

好囉！這就是在設計組件的基礎，下一篇文章我們會看看比較進階的組件設計，例如目前參數是由父層傳遞到子層，如果我們希望透過子層傳回給父層，應該怎麼做？請繼續關注後續的文章吧！