以下會用到 Pug 套件，請去安裝 pug套件，可參考：

從頭開始用 Laravel 來做CRUD -12- 架設 - npm - pug

重點： props

假設情境如，如在父組件 table 中，checkbox 複選取多資料，傳入子組件，由子組件判斷其選擇的數量，子組件可顯示數選取的數量。

1、Parents.vue template

<template lang="pug">
div
    app-child(
        v-bind:child-selected="parents_selected"
    )
</template>

2、Parents.vue script

<script>
import Child from './Child.vue'
export default{
    components:{
        appChild: Child,
    },
    data(){
        return {
            parents_selected: [],
        }
    }
}
</script>

3、Child.vue template

<template lang="pug">
div
    p {{childSelected}}
</template>

4、Child.vue script

export default{
    props: {
        childSelected: {type: String},
    }
}

利用上方簡易的寫法，我們在父組件中，利用bind 的方式，將 parents_selected 的陣列，導入到 app-child 子組件中

而在子組件中，利用 props ，讓子組件知道父組件有傳來的資料，並宣告變量型態，此變量型態要正確，不然會報錯。

注意事項：

在規範中，父組件 bind 的部份要 child-selected 而在 子組件要寫成 childSelected ，特別要注意喔！

--- 相關文章 ----
[Vue,組件] 如何由父組件按鈕去執行子組件的方法 (methods)
[Vue,組件] 如何由子組件按鈕去執行父組件的方法 (methods)
[Vue,組件] 如何由父組件傳值（Value）給子組件
[Vue,組件] 如何由子組件傳值（Value）給父組件
--- 更多的文章 在痞客邦 ----
痞客邦

感謝

感謝各位的觀看！
友情連結：鑽頭-瑜誠
文中如有技術不良或寫錯的部份，如您願意指出，我們也很樂意接受您的指正，但請不要惡意攻撃，我們只是為了樂趣而寫的文章。