关于javascript:Vue组件3-父传子-子传父

父子组件通信父传子props

props --> properties (属性)

如何进行父子组件通信
- 通过props向子组件传递数据
- 通过事件向父组件发送音讯

props根本用法

在组件中，应用选项props来申明须要从父级接管到的数据

props的值由两种形式

形式一：字符串数组，数组中的字符串就是传递时的名称

形式二：对象，对象能够设置传递时的类型，也能够设置默认值等
父传子

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

</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>

父子组件通信 父传子props

props根本用法

父子组件通信父传子props