vue子组件传值到父组件$emit

功能：

子组件为一个switch开关，通过switch的开关来控制父组件div的背景颜色

以下为示例代码：

子组件代码：

<template>
    <div>
        <!--用到的是iview的switch开关-->
        <i-switch @on-change="setCard" v-model="menuCards"></i-switch>
    </div>
</template>

<script>
    export default {
        props: { // String Number Boolean Array Object Function
            menuCard: Boolean // 接收父组件传来的值
        },
        data () {
            return {
                menuCards: this.menuCard // 定义新变量，需要把父组件的值赋给新变量
            }
        },
        methods: {
            setCard (status) {
                this.menuCards = !this.menuCard // 切换卡片
                // 子组件传值到父组件（参数为父组件接收时的方法，传递的值）
                this.$emit('cardChild', this.menuCards) 
            },
        },
    }
</script>

子组件通过this.$emit()的方式将值传递给父组件      注意：这里的func是父组件中绑定的函数名

父组件代码：

<!--suppress ALL -->
<template>
    <div class="w-jz">
        <EmitDemo @cardChild="cardChildZdy" :menuCard="menuCard"/>
        <div :style="{background: menuCard ? 'red' : 'blue', width: 200 + 'px', height: 100 + 'px'}"></div>
    </div>
</template>

<script>
    import EmitDemo from '@testCp/EmitDemo'

    export default {
        components: {
            EmitDemo
        },
        data () {
            return {
                menuCard: true
            }
        },
        methods: {
            cardChildZdy (cardChild) { // 接收子组件传过来的值
                console.log(cardChild)
                // cardChild就是子组件传过来的值
                this.menuCard = cardChild
                // console.log(this.menuCard)
            },
        },
    }
</script>