iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
自我挑戰組

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

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

  • 分享至 

  • xImage
  •  

呈上一篇組件設計的文章,今天來介紹組件資料和方法的應用,在使用組件的時候,各個子層可以有獨立的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出來。

範例檔

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


上一篇
vue3 Composition API 學習手冊-16 組件設計入門
下一篇
vue3 Composition API 學習手冊-18 組件emit的用法
系列文
網頁前端框架 Vue 3 從頭開始(重新挑戰)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言