Vue中父组件（vue实例）与子组件（component）之间的数据传递

父组件向子组件传递数据

子组件默认无法访问到父组件中的data上的数据和methods中的方法，需要通过v-bind绑定和props传递

<div class="app">
    <!-- 模板对象：以绑定的形式将vue实例中的数据传递到子组件  :名称（prentmsg）="vue实例data上的属性名" -->
    <com :prentmsg="mes"></com>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            mes:'这是一个父组件的数据'
        },
        components:{
            com:{
                template:'<h1>这是自身的模本数据------{{ prentmsg }}</h1>',
                // 子组件通过props，把父组件传递过来的属性（prentmsg）供子组件使用
                props:['prentmsg']
            }
        }
    })
</script>

 

---

子组件向父组件传递数据

子组件通过事件调用向父组件传递数据

/*通过this.$emit('绑定事件的名称'，data参数。。。)调用事件绑定的func方法*/

<div class="app">
    <!--通过事件绑定将@绑定事件的名称（func）='父组件中的methods方法（show）'-->
    <com @func="show"></com>
</div>

<!--子模板-->
<template id="temp">
    <div>
        <input type="button" value="子组件向父组件传递数据" @click="myclick">
        <h3>这里是子组件的模本内容</h3>
    </div>
</template>
<script src="../lib/vue-2.4.0.js"></script>
<script>

    var vm = new Vue({
        el: '.app',
        data: {
            prentMes: null
        },
        methods: {
            show(data){
                /*将子组件的数据通过参数data（somMes）传递给父组件中的数据（prentMes）*/
                this.prentMes=data;
            }
        },
        /*子组件*/
        components: {
            com: {
                template: '#temp',
                data(){
                    return {
                        somMes:{name:'小灰灰',age:7}
                    }
                },
                methods:{
                    /*子组件自身的点击事件方法*/
                    myclick(){
                        /*通过this.$emit('绑定事件的名称（func）'，data参数。。。)调用事件绑定的func方法*/
                        this.$emit('func',this.somMes);
                    }
                }
            }
        }
    })

</script>