Vue 3 组件通信技巧

2023-11-13 19:21:21

介绍

Vue 3 是一个强大的 JavaScript 框架，它使您能够轻松地构建交互式和响应式 Web 应用程序。Vue 3 引入了许多新特性和改进，其中之一就是组件通信。组件通信允许您在应用程序中的不同组件之间共享数据和事件。这对于构建复杂和模块化的应用程序非常有用。

组件通信技巧

在 Vue 3 中，有几种不同的方法可以实现组件通信。每种方法都有其自己的优缺点，因此您需要根据自己的特定需求选择最合适的方法。

1. Props

Props 是最基本和最常用的组件通信方法。Props 允许您将数据从父组件传递给子组件。子组件可以通过 props 访问这些数据。

<!-- 父组件 -->
<template>
  <ChildComponent :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from the parent component!'
    }
  }
}
</script>


<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

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

2. Emit

Emit 与 props 相反，它允许子组件向父组件发送事件。父组件可以通过监听这些事件来做出响应。

<!-- 子组件 -->
<template>
  <button @click="handleClick">Send message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello from the child component!')
    }
  }
}
</script>


<!-- 父组件 -->
<template>
  <ChildComponent @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // "Hello from the child component!"
    }
  }
}
</script>

3. provide/inject

provide/inject 允许您在组件树中共享数据和方法。provide/inject 与 props 非常相似，但它允许您在组件之间共享任何类型的数据，而不仅仅是简单的数据类型。

<!-- 父组件 -->
<template>
  <ChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello from the parent component!'
    }
  }
}
</script>


<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

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

4. $parent

$parent 属性允许子组件访问其父组件。这对于需要访问父组件数据或方法的子组件非常有用。

<!-- 子组件 -->
<template>
  <p>{{ $parent.message }}</p>
</template>

<script>
export default {
}
</script>

5. $refs

$refs 属性允许组件访问其子组件。这对于需要访问子组件数据或方法的组件非常有用。

<!-- 父组件 -->
<template>
  <ChildComponent ref="child" />
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod()
    }
  }
}
</script>


<!-- 子组件 -->
<template>
  <button @click="childMethod">Call child method</button>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called!')
    }
  }
}
</script>

6. Vuex

Vuex 是一个状态管理库，它允许您在 Vue 应用程序中集中管理状态。Vuex 非常适合管理全局状态，例如用户数据、购物车数据等。

7. 自定义事件

自定义事件允许您在组件之间发送自定义事件。这对于需要在组件之间进行复杂通信的应用程序非常有用。

<!-- 父组件 -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

<script>
export default {
  methods: {
    handleCustomEvent(event) {
      console.log(event.detail) // { message: 'Hello from the child component!' }
    }
  }
}
</script>


<!-- 子组件 -->
<template>
  <button @click="emitCustomEvent">Send custom event</button>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event', { message: 'Hello from the child component!' })
    }
  }
}
</script>

8. 事件总线

事件总线是一个全局对象，它允许您在组件之间广播和监听事件。这对于需要在组件之间进行松散耦合的通信的应用程序非常有用。

<!-- 父组件 -->
<template>
  <ChildComponent />
</template>

<script>
export default {
  mounted() {
    this.$eventBus.$on('custom-event', this.handleCustomEvent)
  },
  beforeDestroy() {
    this.$eventBus.$off('custom-event', this.handleCustomEvent)
  },
  methods: {
    handleCustomEvent(event) {
      console.log(event.detail) // { message: 'Hello from the child component!' }
    }
  }
}
</script>


<!-- 子组件 -->
<template>
  <button @click="emitCustomEvent">Send custom event</button>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$eventBus.$emit('custom-event', { message: 'Hello from the child component!' })
    }
  }
}
</script>