父子组件的通信--子传父$emit()

2020-07-24 本文已影响0人 63537b720fdb

父组件通过子组件的props属性可以将父组件的数据传送给子组件
子组件可以通过$emit()，将自定义事件传递给父组件

image.png

一.子组件需要传递自定义事件的场景

在红色大组件中进行网络请求获取数据，通过子组件中props，将红色组件中的数据传递给各个蓝色组件。但是，当我点击左侧边蓝色组件中的手机数码时，该蓝色组件要将点击手机数码的事件发送给红色组件，红色组件根据发送过来的事件再次发送网络请求获取手机数码的数据，右侧边的组件又通过props获取手机数码的数据并展示。

image.png

二、子组件如何向父组件传递自定义事件

首先展示按钮组件

        <div id="app">
            <cpn1></cpn1>
        </div>
        <template id="cpn1">
            <div>
                <!--在button中展示目录的名字-->
                <button v-for="item in categories">{{item.name}}</button>       
            </div>
        </template>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /*子组件构造器*/
            const cpnC1 = Vue.extend({
                template:'#cpn1',
                data(){
                    return{
                        categories:[
                            {id:'001',name:'手机数码'},
                            {id:'002',name:'电脑办公'},
                            {id:'003',name:'家用电器'},
                            {id:'004',name:'美妆护肤'},
                        ]
                    }
                }
            })
            
            /*根组件*/
            const app = new Vue({
                el: '#app',
                components: {
                    cpn1:cpnC1
                }
            })
        </script>