vue组件通讯（一）

一、创建组件和使用组件

1、全局创建

Vue.component('testCom',{
    template:'<div>我是一个测试组件</div>'
});

2、 局部创建

第一步: 先创建一个单文件组件

例如：testcom.vue

<template>
  <div>我是一个测试组件111122222</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

第二步：在需要的文件中引入刚才的testcom.vue，并注册

引入：

import testCom from '@/pages/home/testcom'

注册：

export default {
   ....,
    components:{
        testCom
    },
   ....
}

第三步：在template中使用组件，例如：

<template>
    <div class="home">
            <test-com></test-com>
        </div>
    </div>
</template>

二、 组件通讯（三种方式）

第一种 父->子

 主要通过props实现父传子

 具体实现：

   1.先有两个组件，父：A.vue, 子：B.vue，并将b.vue引入A.vue并注册
   2.在A.vue组件template中使用B.vue工给B.vue绑定传递的属性
           例如：
        <test-com :sub="title"></test-com>

      其中sub表示要传递给子组件的属性，并且sub前要加冒号(:)
    3.在B.vue中通过props接收sub属性
        export default {
           props:['sub'],
           .....
        
        }

第二种 子->父

通过$emit来传递

 格式： this.$emit('要派发的自定义事件',要传递的数据);

 步骤：

    首先：在子组件绑定一个事件，触发一个方法，在方法内部派发一个派发自定义事件，例如：
    
    html部分：
     <button @click="say">向父组件发送数据</button>
     
    js部分：
     methods:{
         say() {
            this.$emit('goup',this.num);
         }
       }

   其次：在父组件使用的子组件中@监听自定义事件，例如：
       html部分：
            <test-com :sub="title" @goup="getdata"></test-com>

        js部分：
            getdata(res) {
                   // console.log(res);
                   this.msg=res;
                }
              
        }

第三种 兄弟->兄弟(即非父子)

1、global Bus:主要利用创建一个空vue做为桥梁，实现兄弟之间通讯

第一步：创建两个A,B兄弟组件和一个bus.js

bus.js文件：
```
import Vue from 'vue'
//创建空的vue
var bus = new Vue()
```

第二步：分别在A,B两个兄弟组件中引入bus.js

import bus from '@/components/common/bus'

第三步：在A组件触发一个事件，在事件方法中派发睚定义事件，并发送传递给B组件的数据,例如A->B

A组件代码中：

 html部分：
      <button @click="go">将发送给B组件</button>
 js部分:
      export default {
        data() {
            return {
                info:'500万'
            }
        },
        methods:{
            go() {
              bus.$emit('tob',this.info);  
            }
        }
    
    }

B组件代码中：在B组件中的生命周期中接收A组件发过来的数据

     created() {
        bus.$on('tob',(res)=>{
          this.msg=res;
         
        })
    }