2023年度鐵人_[Day 21] 父子組件常見操作_part1.(props,defineProps)

 

眾所周知，vue前端框架中組件提升程式碼複用性，為了達到組件的高度重複使用，可以在其它地方使用組件時，在外部(父組件)傳遞資料給子組件。這樣可以實現將外部的資料進入到組件中，從而達到組件在不同的地方，某個 HTML 元素呈現的內容是不一樣的。

小溫故:之前篇章中有介紹到Vue.js 提供了兩種風格的 API 撰寫方式，分別是組合式API(Composition API)和選項式API(Options API)。

Composition API
< script setup > : 不需暴露在模板中使用的變數，為後期單一組件檔(SFC,Single File Components)大多數建議撰寫使用的風格。

Options API
非< script setup >：需要用 return 暴露在模板中使用的變數。
這 2 種程式撰寫方式，於定義 props 時是不一樣的。
在此可以先新增一個MyVueComponent.vue組件，後續再到其餘父祖件中來做測試程式碼效果。

在< script setup >中使用
在單一檔案組件的< script setup>中定義 props 時

<!-- eslint-disable --> 
<template>
    <span>{{msg}}</span>
</template>
<script setup>
    import {  defineProps } from "vue";
    defineProps({
        msg: {
            type: String,
            required: true
        }
    })
</script>

使用 defineProps()方法定義，這裡使用物件的形式定義的，需要將定義的傳遞變數放在大括號{}中。
對於定義的傳遞變數，為物件中的其中一個成員，msg 是變數名稱，之後
再用大括號指定變數的型別和是否為必選、必存在的屬性。
後續在模板中，就可以在需要的地方使用雙花大括號傳遞變數來呈現。

type:用於指定型別，通常可以用String或是Number
required:則以true代表必選,false表示可有可無。

在非< script setup >中使用

<!-- eslint-disable --> 
<script>
    export default {
        props: {
            msg: {
            type: String,
            required: true
            }
        },
        setup(props) {
            const student = { fullName: 'Tony', age: 28, m: props.msg }
            //暴露可在模板中使用的變數
            return { student, props }
        },
        template: `<div>Name:{{student.fullName}}, Age:{{student.age}} 
                    {{student.m}} {{props.msg}}</div>`
    }
</script>

使用 props 定義，這個 props 關鍵字是固定的。props 與 setup()、template用逗號隔開。
把props做為setup()方法的第 1 個傳參。

若在template中有用 props 中定義的變數，在 setup()中使用 return來暴露。
後續再透過props.msg來存取msg變數值。

props 針對陣列型別參數傳遞之處理
除了一般針對物件屬性的定義props之外，也有陣列型別傳參。一般針對< script setup >和非< script setup >
普遍都會用物件形式(一組大花括號)來定義。

在< script setup >中使用

<!-- eslint-disable --> 
<template>
    <span>{{msg}}</span>
</template>
<script setup>
    import {  defineProps } from "vue";
    // eslint-disable-next-line
    const { msg } = defineProps(['msg']);

</script>

在< script setup>中，使用字串陣列定義時，還是用defineProps()方法，但要
使用中括號[]將傳遞變數使用單或雙引號括起來，多個傳遞變數使用逗號隔開。

在非< script setup >中使用

<!-- eslint-disable --> 
<script>
    export default {
        props: ['msg'],
        setup(props) {
            const student = { fullName: 'Tony', age: 28, m: props.msg }
            //暴露可在模板中使用的變數
            return { student, props }
        },
        template: `<div>Name:{{student.fullName}}, Age:{{student.age}} 
                    {{student.m}} {{props.msg}}</div>`
    }
</script>

而在之前的舊寫法則需要用props 在非< script setup>中定義陣列型別，然後將props 傳入到 setup()方法。

所以可以更清楚去瞭解這兩者之間寫法上差異

靜態資料傳遞
在外部向單一文件組件傳遞資料時，只需要在渲染 SFC 的時候，給定義的 props 變數賦值即可。

在< script setup >中使用
比方我們目前這個MyVueComponent.vue組件

<!-- eslint-disable --> 
<template>
    <span>{{msg}}</span>
</template>
<script setup>
    import {  defineProps } from "vue";
    // eslint-disable-next-line
    const { msg } = defineProps(['msg']);

</script>

上述程式碼是使用字串陣列定義的 props 變數 msg，然後在
< template>模板中呈現出現 msg 變數的值。

在App.vue導入該組件後就能模擬父傳子組件的操作存取

<template>
  <main>
    <MyVueComponent msg = "test"/>
  </main>
</template>

<script setup>
  import MyVueComponent from './components/MyVueComponent.vue';

</script>

運行結果