Vue-笔记

父子组件之间的通信

（1）props向子组件传递数据
（2）通过自定义事件向父组件发送消息
（3）在真实开发中，vue实例和子组件的通信和父组件和子组件的通信过程是一样的

父组件向子组件通信，只需要添加 props

<div id="app">
        <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
    </div>
    <template id="cpn">
        <div>
            <p>{{cmovies}}</p>
            <p>{{cmessage}}</p>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //父传子：propos
        const cpn={
            template:'#cpn',
            // props:['cmovies','cmessage']
            props:{
                //1.类型限制
                //  cmovies:Array,
                // cmessage:String 

                //2.提供一些默认值 以及必传值
                cmessage:{
                    type:String,
                    default:'abc', //设置默认值
                    required:true
                },
                //3.类型是对象或者数组时，默认值必须是一个函数
                cmovies:{
                    type:Array,
                    default(){
                        return []
                    }
                },
                //4.自定义类型 
                author:Person
            }
        }

        function Person(firstName,lastName){
            this.firstName = firstName
            this.lastName = lastName
        }

        const app = new Vue({
            el:'#app',
            data:{
                message:'你好',
                movies:['海王','海泽旺']
            },
            components:{
                cpn
            }

        })
    </script>

父传子驼峰标识

通过v-bind 绑定不支持驼峰命名，但可以转成： - 如c-info
如果在组件里 包含很多标签，必须包含一个根 div 把里面标签包起来

子传父：自定义事件

在子组件中，通过$emit()来触发事件
在父组件中，通过v-on来监听子组件事件

 <!-- 父组件模板 -->
    <div id="app">
        <cpn @itemclick = "cpnClick"></cpn>
    </div>

    <!-- 子组件模板 -->
    <template id="cpn">
        <div>
            <button v-for="item in categories" 
                    @click="btnClick(item)">
                {{item.name}}
            </button>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //1.子组件
        const cpn = {
            template:'#cpn',
            data(){
                return {
                    categories:[
                        {id:'aaa',name:'热门推荐'},
                        {id:'bbb',name:'手机数码'},
                        {id:'ccc',name:'家用家电'},
                        {id:'ddd',name:'电脑办公'},
                    ]
                }
            },
            methods:{
                btnClick(item){
                    //发射事件 :自定义事件
                    this.$emit('itemclick',item)
                }
            }
        }

        //2.父组件
        const app = new Vue({
            el:'#app',
            data:{

            },
            components:{
                cpn
            },
            methods:{
                cpnClick(item){
                    console.log('cpnClick',item);
                }
            }
        })
    </script>