组件通信的七种方法，助力Vue3开发者更上一层楼

前端

2023-10-22 20:49:02

踏上组件通信的征程

在Vue3中，组件通信是构建复杂应用程序的关键。组件是Vue3应用程序的基本构建块，它们可以被组合起来创建出更加复杂的UI。为了让这些组件能够相互协作，就需要用到组件通信。

组件通信有多种方法，每种方法都有其独特的优缺点。在本文中，我们将介绍七种最常用的组件通信方法，帮助您掌握Vue3组件通信的精髓。

一、props和events：组件通信的基础

props和events是Vue3中两种最基本也是最常用的组件通信方法。props用于从父组件向子组件传递数据，而events用于从子组件向父组件传递数据。

1. props：传递数据

props是子组件从父组件接收数据的唯一方式。父组件可以通过在子组件的template中声明props，然后在子组件的script中使用props来访问这些数据。

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

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

2. events：传递事件

events是子组件向父组件传递事件的唯一方式。子组件可以通过在子组件的template中使用@event-name来声明事件，然后在子组件的script中使用this.$emit('event-name')来触发事件。

<template>
  <div>
    <button @click="handleClick">点我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

二、slots：内容分发

slots允许父组件向子组件传递内容。父组件可以通过在子组件的template中使用来声明slots，然后在子组件的script中使用this.$slots来访问这些slots。

<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  render() {
    return (
      <div>
        <slot name="header">默认头部</slot>
        <slot name="content">默认内容</slot>
        <slot name="footer">默认尾部</slot>
      </div>
    )
  }
}
</script>

三、provide/inject：跨级组件通信

provide/inject允许祖先组件向其所有后代组件传递数据。祖先组件可以通过在组件的script中使用provide()来提供数据，后代组件可以通过在组件的script中使用inject()来注入这些数据。

// 祖先组件
export default {
  provide() {
    return {
      message: 'Hello World'
    }
  }
}

// 后代组件
export default {
  inject: ['message'],
  render() {
    return (
      <div>
        <h1>{{ message }}</h1>
      </div>
    )
  }
}

四、mixins：代码复用

mixins允许您在多个组件中复用代码。您可以通过在组件的script中使用mixins()来混入mixins。

// mixins.js
export default {
  data() {
    return {
      message: 'Hello World'
    }
  }
}

// 组件A
export default {
  mixins: [mixins],
  render() {
    return (
      <div>
        <h1>{{ message }}</h1>
      </div>
    )
  }
}

// 组件B
export default {
  mixins: [mixins],
  render() {
    return (
      <div>
        <h1>{{ message }}</h1>
      </div>
    )
  }
}

五、Vuex：全局状态管理

Vuex是一个全局状态管理库，它允许您在应用程序中集中管理状态。组件可以通过在组件的script中使用mapState()和mapActions()来访问和修改Vuex中的状态。

// store.js
export default new Vuex.Store({
  state: {
    message: 'Hello World'
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    setMessage({ commit }, message) {
      commit('setMessage', message)
    }
  }
})

// 组件
export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['setMessage'])
  },
  render() {
    return (
      <div>
        <h1>{{ message }}</h1>
      </div>
    )
  }
}

六、自定义事件：跨组件通信

自定义事件允许您在组件之间触发和监听自定义事件。您可以通过在组件的template中使用@event-name来声明自定义事件，然后在组件的script中使用this.$emit('event-name')来触发自定义事件。

<template>
  <div>
    <button @click="handleClick">点我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event')
    }
  }
}
</script>

其他组件可以通过在组件的template中使用@event-name来监听自定义事件，然后在组件的script中使用this.$on('event-name')来处理自定义事件。

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleCustomEvent() {
      console.log('自定义事件触发了')
    }
  }
}
</script>

七、全局事件总线：跨组件通信

全局事件总线是一个对象，它允许您在组件之间触发和监听全局事件。您可以通过使用Vue.prototype.on('event-name')来监听全局事件，然后在组件的script中使用this.emit('event-name')来触发全局事件。

// main.js
Vue.prototype.$on('global-event', function(data) {
  console.log(data)
})

// 组件A
export default {
  methods: {
    handleClick() {
      this.$emit('global-event', 'Hello World')
    }
  }
}

// 组件B
export default {
  methods: {
    handleGlobalEvent(data) {
      console.log(data)
    }
  },
  mounted() {
    Vue.prototype.$on('global-event', this.handleGlobalEvent)
  },
  beforeDestroy() {
    Vue.prototype.$off('global-event', this.handleGlobalEvent)
  }
}