Vue3组件间通信：你的灵魂伴侣在Vue3的内置库！

2023-09-20 22:44:05

Vue 3 中的组件通信：解锁组件间的无缝对话

在 Vue 3 的组件化世界中，组件之间的通信就像灵魂伴侣的邂逅，是应用程序建设的基石。Vue 3 提供了一系列内置的通信方法，让组件间的信息传递变得轻而易举。这些方法从公开到私密，从单向到双向，就像不同类型的爱情故事，满足着不同的交流需求。

相知相惜，组件间通信方法

provide & inject：传递数据的亲子纽带

provide：组件如同父母，慷慨地提供数据，通过 provide 传递信息。
inject：组件如同子女，乖巧地接收数据，通过 inject 吸收信息。

// 父组件：提供数据
<template>
  <ChildComponent />
</template>

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

// 子组件：注入数据
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  inject: ['message'],
  setup() {
    return {
      message: this.message
    }
  }
}
</script>

emit & on：子向父倾诉的心声

$emit：子组件如同向父母倾诉的孩子，通过事件发出声音。
$on：父组件如同倾听孩子的父母，通过事件监听孩子的诉说。

// 父组件：监听子组件事件
<template>
  <ChildComponent @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log('Message from child:', message)
    }
  }
}
</script>

// 子组件：发出事件
<template>
  <button @click="emitMessage">Send message to parent</button>
</template>

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

attrs & listeners：时光穿梭的信息传递

$attrs：就像来自过去的礼物，父组件传递数据给子组件。
$listeners：就像未来的预言，子组件接收父组件的事件监听器。

// 父组件：传递数据和监听器
<template>
  <ChildComponent v-bind="$attrs" v-on="$listeners" />
</template>

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

// 子组件：接收数据和监听器
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  setup(props, context) {
    return {
      message: props.message
    }
  }
}
</script>

slot & 具名插槽：组件间的数据共享

slot：就像一个传送门，数据从父组件传送到子组件。
具名插槽：就像一个特定的收货地址，数据准确地传递到子组件的指定位置。

// 父组件：传递数据
<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>Header from parent</h1>
    </template>
  </ChildComponent>
</template>

<script>
export default {}
</script>

// 子组件：接收数据
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

<script>
export default {}
</script>

非具名插槽：组件间的内容共享

非具名插槽：就像一个自由的舞台，数据从父组件传送到子组件，由子组件自由发挥。

// 父组件：传递内容
<template>
  <ChildComponent>
    Hello from parent!
  </ChildComponent>
</template>

<script>
export default {}
</script>

// 子组件：接收内容
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {}
</script>