Vue組件（3） 父傳子 子傳父

父子組件通訊 父傳子props

props --> properties (屬性)

• 如何進行父子組件通訊

  • 經過props向子組件傳遞數據
  • 經過事件向父組件發送消息

props基本用法

• 在組件中，使用選項props來聲明須要從父級接收到的數據

• props的值由兩種方式

  • 方式一：字符串數組，數組中的字符串就是傳遞時的名稱

  • 方式二：對象，對象能夠設置傳遞時的類型，也能夠設置默認值等
    父傳子

    <div id="app">
        <cpn v-bind:movies="movies"></cpn>
    </div>
    <template id="cpn">
    <div>

    {{movies}}

    </div>
    </template>
    <script>
        //父傳子：props
        var cpn = {
            template: '#cpn',
            props: ['movies']
        }
        var app = new Vue({
            el: '#app',
            data: {
                movies: ['海王', '大海', '海水']
            },
            components: {
                cpn
            }
        })
    </script>

子傳父

• 何時要自定義

  • 當子組件須要向父組件傳遞數據時，就要用到自定義事件
  • v-on不只能監聽DOM事件，也能夠用於組件間的自定義事件

• 自定義事件的流程

  • 在子組件中，經過$emit()來觸發事件

  • 在父組件中，經過v-on來監聽子組件事件

    <!-- 父組件模板 -->
    <div id="app">
        <cpn @item-click="cpnClick"></cpn>
    </div>
    <!-- 子組件模板 -->
    <template id="cpn"> 
    
    <div>
        <button v-for="item in categories" 
                @click="btnclick(item)">
            {{item.name}}
        </button>
    </div>
    </template>
    <script>
    //子組件
        const cpn = {
                template: '#cpn',
                    data() {
                    return {
                        categories: [{
                        id: 'aaa',
                        name: '熱門推薦'
                    }, {
                        id: 'bbb',
                        name: '手機數碼'
                    }, {
                        id: 'ccc',
                        name: '家用家電'
                    }, {
                        id: 'ddd',
                        name: '電腦辦公'
                        }, ]
                    }
                },
                methods: {
                    btnclick(item) {
                        //發射事件:自定義事件
                        this.$emit('item-click', item)
                    }
                }
            }
            // 父組件
        var app = new Vue({
            el: '#app',
            components: {
                cpn
            },
            methods: {
                cpnClick(item) {
                    console.log('cpnClick', item);
                }
            }
        })
    </script>