呈上一篇組件設計的文章,今天來介紹組件資料和方法的應用,在使用組件的時候,各個子層可以有獨立的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出來。
好囉!這就是在設計組件的基礎,下一篇文章我們會看看比較進階的組件設計,例如目前參數是由父層傳遞到子層,如果我們希望透過子層傳回給父層,應該怎麼做?請繼續關注後續的文章吧!