vue组件以及父子组件之间的通信
1.如何使用组件
1.1 全局
组件主要是提高代码重用性，让代码可以重复利用。组件在使用之前需要注册组件，注册组件的方法有俩种。一种是全局注册，一种是局部注册。
Vue.component('my-component',{
template：'<div>注册组件</div>'
})
其中my-component是自定义组件名，可以任意命名，推荐小写减号分割的形式。后面的大括号里内容是组件选项，在组件选项加template可以在页面中显示出组件的内容。其内容必须被dom元素包起来，比如说上面的“注册组件”被一组div包裹起来了。
1.2局部
局部组件只在该实例的作用域下才有效，具体代码如下
<div id="app">
<my-component></my-component>
</div>
<script>
var child = {
template:''<div>局部注册组件</div>''
}
var app = new Vue({
el:'#app',
components: {
'my-comoponent':child
}
})
</script>
总结：template后面的内容就是组件的内容，将会在页面中显示。
2.父组件向子组件传递数据
2.1父传子的基本用法
在将数据传输之前，我们先应该知道哪个是父组件，哪个是子组件。就拿全局的来说，其中
‘<my-component></my-component>’是父组件，父组件通过prop正向传递数据给Vue.component中子组件。
props的值有两种，一种是字符串数组，用于传递数据；一种是是对象，用于对props进行验证。后者比较好理解，这里主要来讲一下字符串数组这种形式。
<div id="app">
<input type="text" v-model= "parentMessage">
<my-component :Message = "parentMessage"></my-component>
</div>
<script>
Vue.component('my-component',{
props:['message'],
template: '<div>{
{ message }}</div>'
});
var app = new Vue({
el:'#app',
data:{
parentMessage: ''
}
})
</script>
上面的例子中，文本框中v-model与data中parentMessage绑定。当你在文本框输入信息的时候，输入的内容会绑定到data中parentMessage中。父组件中的Message传递到子组件中的props上，子组件于是获取到message这个属性，该属性就会通过template后显示出来。结果如下图所示：
2.2父传子应当注意的地方
在子组件中，当你想要改变其中数据的值得时候不能直接改变，应该将改变的过程写在data对象或者计算属性computed里面。
在JavaScript中对象和数组是引用类型，指向同一个内存空间。当props是对象和数字时候，在子组件里面改变值会影响父组件的值。当父组件有多个的时候很明显。子组件里面值改变一个，所有的父组件都会改变。而我们通常期望父组件之间是相互独立的。
3.子组件向父组件传递数据
子组件通过$emit来触发事件，在父组件中能够监听到触发的这个事件去执行一个函数。通过第5个例子来详细讲解子传父的过程。
<div id="app">
<p>总数：{
{
total }}</p>
<my-component
@increase = 'handeleGettotal'
@reduce = 'handeleGettotal'></my-component>
</div>
<script>
Vue.component('my-component',{
template: '\
<div>\
<button @click = "handleIncrease">+1</button>\
<button @click = "handleReduce">-1</button>\
</div>',
data: function () {
return {
counter:0
}
},
methods: {
handleIncrease :function () {
this.counter++;
//通过$emit()把改变后的counter传递给父组件
this.$emit('increase',this.counter);
},
handleReduce :function () {
this.counter--;
this.$emit('reduce',this.counter);
},
}
})
var app = new Vue({
el:'#app',
data:{
total:0
},
methods: {
handeleGettotal: function (total) {
this.total = total;
}
}
})
