Vue通讯+Vuex

第一种 父->子

 主要通过props实现父传子

 具体实现：

   1.先有两个组件，父：A.vue, 子：B.vue，并将b.vue引入A.vue并注册
   2.在A.vue组件template中使用B.vue工给B.vue绑定传递的属性
           例如：
        

      其中sub表示要传递给子组件的属性，并且sub前要加冒号(:)
    3.在B.vue中通过props接收sub属性
        export default {
           props:['sub'],
           .....
        
        }
          
 注： 也可以对父级传过来的数据类型做验证，例如：
         props:{
             sub:{
               type:Number,
               default:0
             }
       }

第二种 子->父

通过$emit来传递

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

 步骤：

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

   其次：在父组件使用的子组件中@监听自定义事件，例如：
       html部分：
            

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


  注意：父传给子级的数据，那子级能否把父级传过来的数据改变呢，可以通过添加.sync属性，即

      在父组件中:
      

js数据类型

 ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

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

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部分：
      将发送给B组件
 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;
         
        })
    }

2、vuex

（一）vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
（二）适用场景？构建是一个中大型单页应用
（三）优缺点：
优点：采用集中式存储管理应用的所有组件的状态
缺点：如果开发小型单页应用，使用 Vuex 可能是繁琐冗余
（四）其他方案：如果开发小型单页应用，一个简单的 global event bus 就足够您所需了
（五）说一下如何实现？要么说代码，要么说思路

   第一步：安装vuex
        npm install vuex --save

   第二步：创建一个store目录，并在内部创建一个index.js

     // 在index.js引入下面内容：
        import Vue from 'vue'
        import Vuex from 'vuex'
        
        Vue.use(Vuex);

      //创建存储数据的仓库state,集中管理数据
        const state={
             msg:"1509A"
        }
        
     //actions中的方法,这里面的方法都是异步操作
        const actions={
             setValue(context,res) {
                // console.log(res);
                context.commit('setData',res);
             }
        
        }

    //创建mutations，目的是能最终改变仓库中的数据，这里是同步操作