关于javascript: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>