Vue基础----组件通信

vue组件以及父子组件之间的通信

---

1.如何使用组件
1.1 全局

组件主要是提高代码重用性，让代码可以重复利用。组件在使用之前需要注册组件，注册组件的方法有俩种。一种是全局注册，一种是局部注册。

Vue.component('my-component',{
    template：'
注册组件
'
})

其中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父传子的基本用法

在将数据传输之前，我们先应该知道哪个是父组件，哪个是子组件。就拿全局的来说，其中‘’是父组件，父组件通过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: '
{{ message }}
'
        });
        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: '\
           
\
               +1\
               -1\
           
',
           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;
               }
           }
       })