Vue2的父传子和子传父

父传子：父组件是通过props属性给子组件通信的

注：在props里定义需要传入的变量，然后在子组件中渲染使用，从父组件中v-bind绑定传入数据

父组件代码：

<template>
    <div>
        <h1>父组件App.vue</h1>
        <MyCount :count="1" :state="true"></MyCount>
    </div>
</template>
<!-- 父传子 -->
<script>
import MyCount from './Count.vue'
export default {
    name: 'MyApp',
    components: {
        MyCount
    }
}
</script>

子组件代码： 

<template>
    <div>
        <p>数量：{{ count }}</p>
        <p>状态：{{ state }}</p>
    </div>
</template>

<script>
export default {
    name: 'MyCount',
    props: ['count', 'state']
}
</script>

子传父：通过绑定事件然后及$emit传值

问：绑定的countChange事件如何触发呢？

答：在谁身上定义的就找谁触发，我们需要找子组件触发 

注：在子组件中用emits声明自定义事件countChange，将自定义事件用v-on（和click等事件一样）绑定到父组件中，在button中添加的函数add中用$emits触发事件，当按钮被点击时，自定义事件被触发，在父组件中定义函数做出响应，可传参

父组件代码：

<template>
    <div>
        <h1>根组件App.vue</h1>
        <MyCounter @countChange="getCount"></MyCounter>
    </div>
</template>
<!-- 子传父 -->
<script>
import MyCounter from './Counter.vue'
export default {
    name: 'MyApp',
    methods: {
        getCount(value) {
            console.log('触发了countChange自定义事件', value);
        }
    },
    components: {
        MyCounter
    }
}
</script>

子组件代码：

<template>
    <div>
        <p>{{ count }}</p>
        <button @click="add">加1</button>
    </div>
</template>

<script>
export default {
    name: 'MyCounter',
    // 自定义声明事件
    emits: ['countChange'],
    data() {
        return {
            count: 0
        }
    },
    methods: {
        add() {
            this.count++
            // 触发自定义事件
            this.$emit('countChange', this.count)
        }
    }

}
</script>