Vue父子组件之间的数据传递

传递的基本方式

父传子

<div id="app2">
        <cpn :cmessage="message"></cpn>  //绑定父组件的数据
    </div>
    <template id="ap2">
        <div>
            <div>组件化开发{{cmessage}}</div>
        </div>
    </template>
    <!-- 1引入vue文件 -->
    <script src="./vue.js"></script>
    <script>
        var app2 = new Vue({
            el: '#app2',
            data: {
                message: 'hhhh'
            },
            components: {
                cpn: {
                    template: '#ap2',
                    props: ['cmessage']//数组形式
                }
            }
        })

子传父

子传父的原理就是，通过事件绑定传值，子组件的事件传给父组件，父组件对其做出对应操作，通过$emit发射事件

在子组件中实现方法

父组件做出回应，父组件的函数用一个参数进行接收cpnClike(son),该参数就是子组件传来的数据，可以是数组、对象和函数

直接访问组件数据