今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 
明天计划的事情：（一定要写非常细致的内容） 
遇到的问题：（遇到什么困难，怎么解决的） 
收获：（通过今天的学习，学到了什么知识）

vue组件间进行数据传递、

父子组件间

使用props属性，所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态

<div id="app">

<my-item :value="value">//传入数据，注意引号里面的为父组件的数据，

</my-item>

</div>     

Vue.component("my-item",{

    template:"<div>这是组件,{{value}}</div>",

    props:["value"],//声明需要的数据，HTML 特性是不区分大小写的,所以此处如果为驼峰命名法，如：myMessage，则在模板中需要转化为用断线隔开的形式：my-Message

    data:function(){

        return {

        }

    },

    methods:{

    }

});

//创建vue实例

const vm=new Vue({

    el:"#app",

    data:{

        value:"这是父组件的数据",

    },

    methods:{

    },

});

通过自定义事件

自定义事件可以实现子组件向父组件传递数据

1）在子组件中使用$emit(eventName,[...args])触发事件，传递数据

2）在父组件中$on(eventName,callback)监听事件，接受数据作为回调函数的参数，并执行回调函数。

其实这种方法和angular中控制器之间传递数据的有点类似的。注意触发和监听事件的事件类型必须要保持一致，才可接受导数据。

<div id="app">

{{number}}

<!-- 在用到子组件的地方监听，监听当前实例上的自定义事件 ,接受参数，并执行回调-->

<my-item v-on:cli="totlcli">

</my-item>

</div>

Vue.component("my-item",{

template:"<button v-on:click='add'>{{count}}</button>",

data:function(){

    return {

        count : 0,

    }

},

methods:{

    add:function(){

        this.count+=1;

        this.$emit("cli",this.count);//触发当前实例上的事件。多个参数可以数组的形式传递

    }

}

});