Vue兄弟组件、父子组件通信、事件调用

1.兄弟组件通信：

创建新的vue实例bus.js

//bus.js

import Vue from 'vue'
export default new Vue

组件A：

import Bus from 'bus.js'
Bus.$emit('name', something) //name按照我自己的理解就是一个连接的作用 连接着$on 两者要保持一致（如果理解有误一定请指正）something就是你要传递的参数

组件B：

import Bus from 'bus.js'
Bus.$on('name', something) //something是接收的参数 可以赋值到你想要的地方

2.父子组件通信：

   2.1 父-->子

父组件中通过router-view渲染子组件，或者在父组件中引用子组件都行，我的例子是通过router-view渲染的，父组件：

<router-view ref="event" :form-data="msg"></router-view> //router-view上绑定form-data 注意这里使用-代替驼峰写法 msg是传递的数据

// js
export default {
  data () {
    msg: 'i am a message'
  }
}

这里就是一个传递的过程，将需要传递的数据绑定在子组件上

子组件：

// js

export default{
  props:['formData'], //这里通过 props接收传递过来的数据 这样就完成了父组件到子组件的数据传递
  mounted () {
    console.log(this.formData)
  }
}

3.父组件触发子组件的自定义事件

在2.1的router-view中有这么个属性ref=“event”，我们可以在父组件中通过$refs来调用子组件中的方法写法如下：

export default {
  methods: {
    click () {
        this.$refs.event.getSomething()
    }
  }
}

getSomthing就是子组件中的方法，这里需要注意的是，如果你的子组件循环出来的，调用的使用要用index获取对应的值，例如：this.$refs.event[index].getSomething()

4.子组件触发父组件状态改变

场景描述：A组件（父）中点击按钮改变serverStatus的状态控制提示框（子组件B）显示，在B组件中点击关闭按钮触发父组件中serverStatus的值关闭提示框

// A组件
<div class="mask" v-show="serverStatus">
    <server @close="serverStatus = false"></server>
</div>

// B组件
<span class="x" @click="close"></span>

export default {
  methods: {
    close () {
      this.$emit('close', false)
    }
  }
}

在B组件中定义点击事件close并通过$emit触发，在A组件中监听close事件后改变serverStatus的值，需要注意的是A组件中的监听 必须要绑定在子组件上才能成功监听

未完待续，本文若有错误的地方还请大家指正

欢迎转载，但请注明出处