Vue组件父子通信基础篇(传值与事件)

vue开发中我们经常会使用或者开发一些组件，这篇文章我们就来聊聊组件之间的父子通信。
一、Props

这是官方的解释：Prop 是你可以在组件上注册的一些自定义 attribute；
在我们日常开发中使用的非常多，简单都说它就像是一个抽水机，可以把池子里的水抽到盆里。但不能逆向输出。

下面我们来看一个例子吧，(亲可复制代码执行哦)

<div id="app">
    {{message}}
    <br />
    <button @click="saveMoney">存钱</button>
    <!--银行卡组件-->
    <card :deposit="money"></card>
</div>
<script>
    //首先我们注册一个全局组件
    //好比这是我们存钱的银行卡，每天努力工作赚钱存钱，娶媳妇儿
    Vue.component("card",{
        template:"<h1>￥:{{deposit}}</h1>",
        props:[
            "deposit"
        ],
        data:function(){
            return {

            }
        },
    })

    //每天努力工作
    var vu = new Vue({
        el:"#app",
        data:{
            message:"",
            money:0,
        },
        created(){
            this.message = "好好工作，赚钱钱";
        },
        computed:{

        },
        methods:{
            //老板发工资啦，存钱事件
            saveMoney:function(){
                var money = this.money;
                this.money = ++money;
            }
        }

    })
</script>

 全局组件card中，我们通过porps接受在组件注册时自定义的任意的属性列表。动态传值只需要在属性名前加上v-bind即可

二、$emit 

触发当前实例上的事件。附加参数都会传给监听器回调。简单说就是我们可以在组件中自定义事件，子组件中使用 this.$emit 来调用。
 

<div id="app">
    {{message}}
    <br />
    <button @click="saveMoney">存钱</button>
    <!--银行卡组件-->
    <card :deposit="money" @mycard="getMoney"></card>
</div>
<script>
    //首先我们注册一个全局组件
    //好比这是我们存钱的银行卡，每天努力工作赚钱存钱，娶媳妇儿
    Vue.component("card",{
        template:"<div><h1>￥:{{deposit}}</h1>" +
            "<button @click='payMoney'>存钱通知</button></div>",
        props:[
            "deposit"
        ],
        data:function(){
            return {

            }
        },
        methods:{
            payMoney(){
                var param = {
                    "money":1000,
                    "msg":"已存入1000元整"
                };
                this.$emit("mycard",param);
            }
        },
    })

    //每天努力工作
    var vu = new Vue({
        el:"#app",
        data:{
            message:"",
            money:0,
        },
        created(){
            this.message = "好好工作，赚钱钱";
        },
        computed:{

        },
        methods:{
            //老板发工资啦，存钱事件
            saveMoney:function(){
                var money = this.money;
                this.money = ++money;
            },

            getMoney(ev){
                console.log(ev);
            }
        }

    })
</script>

三、ref通信

ref 是用来给DOM或者子组件注册应用信息，父组件中可以直接使用 this.$refs.componentName调用子组件中的方法或data数据。