剖析Vue组件通信六种方式，上篇

2023-12-09 15:02:59

前言

组件是Vue.js最强大的功能之一，但组件实例的作用域是相互独立的，这意味着不同组件之间的数据无法相互引用。一般来说，组件之间可以有以下几种关系：

父子关系： 父子组件之间可以通过props和$emit实现通信。
兄弟关系： 兄弟组件之间可以通过$emit和$on实现通信。
祖孙关系： 祖孙组件之间可以通过props和$emit实现通信。
非父子关系： 非父子组件之间可以通过EventBus或Vuex实现通信。

一、Vue组件间通信六种方式

1. props

props是Vue组件之间通信最基本的方式，它允许父组件向子组件传递数据。props是一个只读属性，子组件可以通过this.props.属性名访问父组件传递的数据。

<template>
  <div>
    <p>父组件传递的数据：{{ this.props.message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

2. $emit

emit是Vue组件之间通信的另一种基本方式，它允许子组件向父组件发送事件。emit方法接受两个参数，第一个参数是事件名称，第二个参数是事件数据。

<template>
  <div>
    <button @click="handleClick">向父组件发送事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click', '子组件发送的数据')
    }
  }
}
</script>

3. $on

on方法用于监听父组件发出的事件，子组件可以通过`this.on('事件名称', 回调函数)`来监听父组件发出的事件。

<template>
  <div>
    <p>父组件发送的数据：{{ this.message }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$on('click', (message) => {
      this.message = message
    })
  }
}
</script>

4. EventBus

EventBus是一个全局事件总线，它允许组件之间进行通信，而不必直接建立父子关系。EventBus是一个Vue实例，它可以通过this.$bus访问。

// 父组件
<template>
  <div>
    <button @click="handleClick">向EventBus发送事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$bus.$emit('click', '父组件发送的数据')
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>父组件发送的数据：{{ this.message }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$bus.$on('click', (message) => {
      this.message = message
    })
  }
}
</script>

5. Vuex

Vuex是一个状态管理库，它允许组件之间共享数据。Vuex通过一个全局状态对象来存储数据，组件可以通过this.$store访问这个状态对象。

// 父组件
<template>
  <div>
    <button @click="handleClick">向Vuex发送数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$store.commit('setData', '父组件发送的数据')
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>父组件发送的数据：{{ this.$store.state.data }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    data() {
      return this.$store.state.data
    }
  }
}
</script>

6. 插槽

插槽允许组件在其他组件中插入内容。插槽可以通过<slot>标签来定义，组件可以通过<template>标签来插入内容。

// 父组件
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  render() {
    return (
      <div>
        <slot>默认内容</slot>
      </div>
    )
  }
}
</script>

// 子组件
<template>
  <div>
    <parent-component>
      <p>子组件插入的内容</p>
    </parent-component>
  </div>
</template>

<script>
export default {

}
</script>