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>