Vue组件 父传子 子传父

Posted 2021-09-07 HUMILITY

父子组件通信 父传子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>