Vue组件通信方式(父传子、子传父、兄弟通信)

Vue组件通信是非常重要的技能，因为在实际开发过程中，我们需要将不同的组件拼接起来形成一个完整的网站或应用。在Vue中，组件通信主要有三种方式：父传子、子传父和兄弟通信。

父传子

父传子通信是指父组件将数据或方法通过属性的方式传递给子组件。子组件可以通过props接收父组件的数据，并且可以使用这些数据来渲染页面或触发某些行为。

父组件中的代码：

<template>
  <div>
    <child :message="msg"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

子组件中的代码:

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

在以上代码中，父组件通过v-bind指令将msg数据传递给子组件，子组件通过props接收这个数据并渲染到页面上。

子传父

子传父通信是指子组件通过$emit方法向父组件传递数据或触发事件。父组件可以通过在子组件上绑定监听事件来接收子组件的数据或行为。

子组件中的代码：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    sendMessage() {
      this.$emit('message', this.message)
    }
  }
}
</script>

父组件中的代码：

<template>
  <div>
    <child @message="handleMessage"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  methods: {
    handleMessage(msg) {
      console.log(msg)
    }
  }
}
</script>

在以上代码中，子组件通过$emit方法向父组件传递了一个名为'message'的事件，并且传递了一个数据(this.message)，父组件在子组件上通过@message监听这个事件，并且使用handleMessage方法接收子组件传递的数据。

兄弟通信

兄弟通信是指两个没有直接父子关系的组件之间的通信。为了实现这种通信方式，我们需要使用一个中央事件总线或状态管理器。

中央事件总线实现方式：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      Event.$emit('message', 'Hello Vue!')
    }
  }
}

const Event = new Vue() // 中央事件总线
</script>

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    Event.$on('message', (msg) => {
      this.message = msg
    })
  }
}

const Event = new Vue() // 中央事件总线
</script>

在以上代码中，两个没有直接父子关系的组件都使用了同一个中央事件总线，并通过$emit方法和$on方法实现了数据的传递。

状态管理器实现方式：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import store from './store'

export default {
  methods: {
    sendMessage() {
      store.commit('setMessage', 'Hello Vue!')
    }
  }
}
</script>

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
import store from './store'

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.message = store.state.message
    store.watch(
      (state) => state.message,
      (newVal) => {
        this.message = newVal
      }
    )
  }
}
</script>

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, msg) {
      state.message = msg
    }
  }
})

export default store

在以上代码中，两个没有直接父子关系的组件都共享了同一个状态管理器，通过commit方法和watch方法实现了数据的传递和响应。