【Vue】父子、兄弟及不相干组件通信

父子组件通信

父=>子

父（v-on即:绑定事件）：

<div id="app">
  <navbar mytitle="title" :myshow="false" :mytext="text"></navbar>
</div>

子（props接收）：

<script>
export default {
  props:{
    myshow: {
      type: Boolean,
      default: false
    },
    mytext: String
//以上两种接收方式都可以
  },
  data(){
    return {}
  }
}
</script>

子=>父

子（this.$emit('fn',data)）：

<template>
<button @click="submit"></button>
</template>
<script>
export default{
  data(){
    return {}
  },
  methods:{
    submit(){
      this.$emit('aaa', false);
    }
  }
}
</script>

父（@接收）

<template>
  <div id="app">  
    <mychild @aaa="handleEvent"></mychild>
  </div>
</template>
<script>
export default {
  data(){
    return {}
  },
  methods:{
    handleEvent(val){
      console.log(val)//false
    }
  }
}
</script>

兄弟组件通信

使用eventBus，事件总线机制。（此方式也可以用在两个不相干组件上）

• $on 接收数据的那个组件
• $emit 发送数据的那个组件

因为Vue实例的原型都在Vue.prototype上，因此我们可以将事件的中心绑定到Vue.prototype的某个属性上，称为bus。

1. 创建实例，导出实例

import Vue from "vue"
const Bus = new Vue()
export default Bus

2. 传值的组件引入事件总线实例,发射事件

import Bus from 'bus.js'
Bus.$emit('something','我是传递的值')

3. 接收的组件引入事件总线实例,接收事件

import Bus from 'bus.js'
Bus.$on('something',(res) => {
  console.log(res)  // ==> '我是传递的值'
})

不相干组件通信

1. 事件总线机制

具体操作请看兄弟组件通信部分

2. 使用provide/inject

1. 要传值的组件provide

provide:{
  something:'我是传递的值'
}

如果要传递的时data里的值,要使用函数的形式return(同data)

data(){
  return{
    msg:'我是传递的值'
  }
},
provide(){
  return{
    something: this.msg
  }
}

2. 接收值的组件通过inject接收

inject:{
  message:{
    from: 'something'
  }
},

mounted(){
  console.log(this.message) // ==> '我是传递的值'
}

3. 使用Vuex

其实vuex很简单，简单的理解来说就是一个数据管理框架，大家将数据都放到一个地方，由这个地方指定的命令来存储和读取数据。
具体使用可以看这篇博客 vuex基础。