Vue组件通信

这是一个小白科普文，如果你对官方文档有点不理解，可以结合本文理解，本文不使用Vuex.

总所周知vue是单向数据流，那么组件之间如何相互传值，相互通信呢？本文使用Vue.component全局定义的组件，单文件组件同理，语法请自行翻译

父子组件通信

父子组件之间相互通信主要用到props和$emit

父组件

父组件通过props传值给子组件

HTML
.....
    <div id="app">
        <child v-bind:login-link='loginLink' @gotologin='onLogIn'></child>              <--目光请看这里
    </div>
.....
<script src='./js/app.js'></script>
复制代码

app.js

let app = new Vue({
  el: '#app',
  data:{
      loginLink:'',
  },
  methods:{
      onLogIn:{...}
  }
复制代码

父组件通过v-bind把自己的loginLink给子组件，子组件通过props接受传值。监听子组件传来的$emit事件调用自己的methos方法进行其他操作。

注意这里有个坑，一定要好好通读文档，v-bind:login-link='loginLink'中的login-link必须全部使用小写加上-连接，不能使用驼峰命名，因为html中的标签和属性不能有大写字母。

子组件

Vue.component('child', {
  props: ['loginLink'],
  template: `
  <div>
    ...此处省略10000行代码
    <button @click="$emit('gotologin')">登录</button>
  </div>
  `,
})
复制代码

子组件通过$emit发送事件，$emit还可以传值，像这样vm.$emit( event, […args] ) 父组件用 $event接收 注意这里也有个坑，$emit('event'),event事件名必须全部全部全部小写,官方文档里面都没写，不知道为啥。。。。

爷孙组件通信

父子组件通信我们已经知道了，那么爷孙组件怎么通信呢？直接使用props和$emit并不能直接通信，我们换个思路，爷爷可以和儿子通信，儿子可以和孙子通信，那么我们把儿子当作中转。

爷组件

HTML
.....
    <div id="app">
        <child v-bind:login-link='loginLink' @gotologin='onLogIn'>我是儿子</child>              <--目光请看这里
    </div>
.....
<script src='./js/app.js'></script>
复制代码

app.js

let app = new Vue({
  el: '#app',
  data:{
      loginLink:'',
  },
  methods:{
      onLogIn:{...}
  }
复制代码

子组件

Vue.component('child', {
  props: ['longinLink'],
  template: `
  <sunzi v-bind:login-link='loginLink' @gotologin="$emit('gotologin')">我是孙子</sunzi>
  `,
})
复制代码

孙组件

Vue.component('sunzi', {
  props: ['longinLink'],
  template: `
  <div>
    <button  @click="$emit('gotologin')">登录</button>
  </div>
  `
})
复制代码

很麻烦啊，所以Vuex的出现就是为了解决这个问题

兄弟组件通信

兄弟组件应该是没有任何关系以及耦合的，但是要通信的话，还是可以，两个兄弟通过父组件就可以通信了，但是这样代码维护很困难，组件之间耦合太紧密了，还可以通过EventBus解决

var bus = new Vue()
Vue.prototype.$bus=bus
// 触发组件 A 中的事件
this.$bus.$emit('songsting', data)
// 在组件 B 创建的钩子中监听事件
this.$bus.$on('songsting', (data)=>{
    
})
复制代码

算了，用Vuex吧，在开发大型应用的时候最好一开始就决定要不要用Vuex，否则代码改起来是十分痛苦的