vue中父子组件之间的传递 props和$emit

props父传子:父组件的数据传递给子组件
$emit子传父:子组件的数据传递给父组件

props 父传子 :将父组件中的message,movies传递给子组件

<!-- 父 -->
<div id="app">
       <!-- 子       父 -->
    <cpn :cmovies="movies" 
         :cmessage="message"
         :cinfo="info"></cpn>
</div>
<!-- 子 -->
<template id="cpn">
    <div>
        <p>{{ cmovies }}</p>
        <p>{{ cmessage }}</p>
        <p>{{ cinfo }}</p>
    </div>
</template>

<script>
    const cpn = {
        template:'#cpn',
        props: {
            //类型是对象或者是数组时，默认值必须是一个函数
            cmovies:{
                type:Array,
                default:[]
            },
            cmessage:{
                type:String,
                default(){
                    return []
                }
            },
            cinfo:{
                type:Object,
                default(){
                    return {}
                }
            }
        }
    }
    const app = new Vue({
        el:"#app",
        data:{
            message:'你好你好',
            movies:['aaa','bbb','ccc'],
            info:{
                name:'lulu',
                age:18,
                sex:'女'
            }
        },

        components:{
            cpn
        }
    })
</script>

子传父$emit :将子组件categories数组中的数据传递给父组件

 <!-- 父 -->
<div id="app">
    <cpn @cpn-click="itemClick"></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:'数码'},
                ]
            }
        },
        methods: {
            btnClick(item){
                // console.log('1111');
                this.$emit('cpn-click',item)
                
            }
        }
    }
    const app = new Vue({
        el:'#app',
        data: {
          
        },
        components:{
            cpn
        },
        methods: {
            itemClick(item){
                console.log('itemClick',item);
                
            }
        },   
    })
</script>

1.子组件传参给父组件主要是通过$emit方法来实现的。

2.在子组件中使用$emit方法，一般它接受两个参数，第一个是自定义事件(这个事件在父组件中需要用到)，第二个参数就是需要传的数据了。

3.而在父组件里，在调用的标签上引用子组件定义的那个事件，然后事件绑定一个函数。在函数里面进行赋值即可。