VUE 组件通信

• VUE中实现组件通信的方法有多种，eventvBus、ref、v-bind、$emit、VUEX ·····等等
• vue组件通信包括：子组件和父组件、兄弟组件之间通信、模块之间通信

父子通信

---

• v-bidn 是响应式的，可以做数据绑定
• 如果给子组件传一个字符串或则对象等一些基本数据类型的数据时，需要加上 v-bind 的缩写 : 来传递

---

• 父组件代码

<template>
   <sone  class="nkl_option1" v-for="(item,index) in option1" :key="index"></sone >
</template>

<script>
import sone from '../sone.vue' //引入子组件模块
export default{
   data(){
     return{
       item:[]
	 }
   }
}
</script>

• 子组件模块

<template>
  <div></div>
</template>

<script>
  export default{
    props:{//用来接收父组件传过来的值
    	item:Object
     }
  }
</script>

---

子向父通信

• 在 vue 中子向父传递数据一般用 $emit 自定义事件来传递，在父组件中监听这个事件并在回调中写相关逻辑

//父组件监听子组件定义的事件
<父组件 :input="我是父组件" v-on:sone="click" />

//子组件需要返回数据时执行，并可以传递数据
this.$emit('sone',data)

---

兄弟之间数据传递

---

vue 中兄弟组件通信是很不方便的，或者说不支持，那么父组件中都有什么通信方式呢？

• 路由URL参数：

1. 在传统开发时我们经常把需要跨页面传递的数据放到 url 后面，跳转到另一个页面时直接获取 url 字符串获取想要的参数即可，在 vue 跨组件一样可以这么做

//router index.js 动态路由
{
   path:'/params/id',
   component: Params,
   name: 'Params'
}

<router-link :to="/params/12" >跳转路由</router-link>

2. 在跳转后的组件中用 $route.params.id 去获取 id 参数为 12，但这个只适合传递比较小的数据，数字之类的

---

• Bus通信
  在组件之外定义一个 bus.js 作为组件通信的桥梁，适合用于比较小型不需要 vuex 又需要组件通信的

• 在 bus.js 中添加如下

import VUe from 'vue'
const eventBus = {}
export eventBUs

• 组件中调用 bus.js 通过自定义事件传递数据

  import Bus from './bus.js' 
  export default { 
      methods: {
         bus () {
            Bus.$emit('msg', '我要传给兄弟组件们')
         }
      }
  }

• 兄弟组件中监听事件接收数据

    import Bus from './bus.js'
    export default {
        mounted() {
           Bus.$on('msg', (e) => {
             console.log(e)
           })
         }
       }

---

vuex

---

vuex是vue的集中状态管理工具，对于大型应用统一集中管理数据，很方便，在此对vuex的用法并不过多介绍只是提一下使用过程中遇到的问题

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。