Vue 元件 : Props in & Emit out


Posted by hoyi-23 on 2021-08-08

元件的特色

  1. 可以獨立運用
  2. 可以重複利用
  3. 各個元件即使屬性名稱一樣也是互相獨立

prop 是即時傳入元件;emit 需要觸發才會傳入 side


多個元件如何組在一起/與建立

多個 Component 元件如何組在一起?

運用 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>

#Props #Component #emit







Related Posts

Hoisting

Hoisting

[Day01]: 甚麼是Docker?與VM有甚麼不同?

[Day01]: 甚麼是Docker?與VM有甚麼不同?

Web開發學習筆記06 — Function Scope vs. Block Scope、IIFE

Web開發學習筆記06 — Function Scope vs. Block Scope、IIFE


Comments