元件的特色
- 可以獨立運用
- 可以重複利用
- 各個元件即使屬性名稱一樣也是互相獨立
prop 是即時傳入元件;emit 需要觸發才會傳入 side
多個元件如何組在一起/與建立
運用 Props 傳入資料
元件的一個很大特點就是:
元件可以重複運用,而且不會互相影響
範例: 現在有App.vue
元件 與Greet.vue
元件,我們將Greet.vue
引入到App.vue
內,讓它被要多次使用,並且每次要與傳入的不同名字打招呼。
在Greet.vue
內:
<template>
<h2>Hello world</h2>
</template>
<script>
export default{
name: "Greet",
};
</script>
在App.vue
內:
<template>
<Greet />
<Greet />
<Greet />
</template>
<script>
import Greet form 'path to Greet.vue'
export default{
name: "App",
component:{
Greet, //這邊需要放上元件名稱
}
};
</script>
運用自定義屬性
現在我們不想要當它重複時就只是 Hello world,我們想要把人名傳進資料,跟每個人打招呼
要怎麼做呢?
步驟: 從 App.vue
傳送名字資料到 Greet.vue
,然後呈現在網頁上出名字
在App.vue
內:
首先我們在 Component上 放上自訂的資料屬性
<template>
<Greet person="Bruce" role="Teacher"/>
<Greet person="Clark" role="Doctor"/>
<Greet person="Dlana" role="Professor"/>
</template>
<script>
import Greet form 'path to Greet.vue' //載入元件
export default{
name: "App",
component:{
Greet, //這邊需要放上元件名稱 //輸出的App元件中,所包含的元件
}
};
</script>
在Greet.vue
內:
那我們要如何讓Greet.vue
拿到資料呢?
使用props幫元件開一扇門來拿取變數。
<template>
<h2>Hello {{ role }} {{ person }}</h2>
</template>
<script>
export default{
name: "Greet", // 輸出的元件名稱
props: ['person','role'] //輸出的屬性資料
};
</script>
上面的方法,是直接將資料帶入自訂屬性
我們也可以引入 data資料 或 computed資料。
運用 data 資料
在App.vue
內:
<template>
<Greet :person="person" :role="role"/> //這邊需要使用bind加入
</template>
<script>
import Greet form 'path to Greet.vue' //載入元件
export default{
name: "App",
component:{
Greet, //這邊需要放上元件名稱 //輸出的App元件中,所包含的元件
},
data(){
return{
person: 'Andy',
role: 'Manager',
}
}
};
</script>
運用 Emit 傳出資料
props 是將資料從外面傳入到裡面,內層元件使用Props接收。
如果要從裡面傳出去到外面,就要使用Emit。
延續前面的情境:
Greet Component 內有一個按鈕,點擊按鈕後會讓外層 App Component 的資料做更動。
(在內層觸發事件,想要影響外層的值。)
送出客製事件
在Greet.vue
內:
<template>
<h2>Hello {{ role }} {{ person }}</h2>
<button @click="$emit('enlarge-text')">字體放大<button>
</template>
<script>
export default{
name: "Greet", // 輸出的元件名稱
props: ['person','role'] //接收資料口
emits: ['enlarge-text'] // 送出的資料口(客製化事件)
};
</script>
在App.vue
內:
<template>
<div :style="{fontsize: fontsize+'em'}">
<Greet :person="person" :role="role" @enlarge-text="fontsize += 0.1"/>
</div>
</template>
<script>
import Greet form 'path to Greet.vue' //載入元件
export default{
name: "App",
component:{
Greet, //這邊需要放上元件名稱 //輸出的App元件中,所包含的元件
},
data(){
return{
person: 'Andy',
role: 'Manager',
fontsize: 1,
}
}
};
</script>
送出客製事件和值
在Greet.vue
內:
<template>
<h2>Hello {{ role }} {{ person }}</h2>
<button @click="$emit('enlarge-text',0.1)">字體放大<button>
//$emit('客製事件',參數(變數))
</template>
<script>
export default{
name: "Greet", // 輸出的元件名稱
props: ['person','role'] //接收資料口
emits: ['enlarge-text'] // 送出的資料口(客製化事件)
};
</script>
在App.vue
內:
<template>
<div :style="{fontsize: fontsize+'em'}">
<Greet :person="person" :role="role" @enlarge-text="fontsize += $event"/>
//使用 $event 接收內層客製事件傳出的變數!!
</div>
</template>
<script>
import Greet form 'path to Greet.vue' //載入元件
export default{
name: "App",
component:{
Greet, //這邊需要放上元件名稱 //輸出的App元件中,所包含的元件
},
data(){
return{
person: 'Andy',
role: 'Manager',
fontsize: 1,
}
}
};
</script>
也可以在把事件寫成methods
<template>
<div :style="{fontsize: fontsize+'em'}">
<Greet :person="person" :role="role" @enlarge-text="onEnlargeText"/>
//使用 $event 接收內層客製事件傳出的變數!!
</div>
</template>
<script>
import Greet form 'path to Greet.vue' //載入元件
export default{
name: "App",
component:{
Greet, //這邊需要放上元件名稱 //輸出的App元件中,所包含的元件
},
data(){
return{
person: 'Andy',
role: 'Manager',
fontsize: 1,
}
},
methods:{
onEnlargeText(enlargeAmount){
this,fontsize += enlargeAmount
}
}
};
</script>