深剖 Vue3 组件通信和插槽用法，揭秘非父子组件协作机制！

前端

2023-11-01 13:59:51

非父子组件通信与插槽：提升 Vue3 代码的可维护性

什么是非父子组件通信？

在 Vue3 中，组件之间不仅可以通过父子关系通信，还可以通过非父子关系进行通信。这种非父子组件通信方式可以有效解耦组件，提升代码的可维护性和可扩展性。

Provider 和 inject

Provider 和 inject 是 Vue3 中实现非父子组件通信的两种方法。Provider 组件用于提供数据或方法，而 inject 则用于在其他组件中注入这些数据或方法。

Provider

Provider 组件通过 provide() 函数提供数据或方法：

provide() {
  return {
    data: '这是提供的数据'
  }
}

inject

inject() 函数在其他组件中注入数据或方法：

inject: ['data'],
setup() {
  return {
    data: null
  }
}

插槽

插槽是 Vue3 中实现组件复用的另一种方式。它允许在组件中定义一个占位符，然后在其他组件中填充这个占位符。

默认插槽

默认插槽是最简单的插槽类型，它允许在组件中定义一个占位符，然后在其他组件中填充这个占位符：

<!-- 父组件 -->
<template>
  <div>
    <MyComponent>
      这是默认插槽的内容
    </MyComponent>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot />
  </div>
</template>

具名插槽

具名插槽允许在组件中定义多个占位符，然后在其他组件中分别填充这些占位符：

<!-- 父组件 -->
<template>
  <div>
    <MyComponent>
      <template v-slot:header>
        这是头部的内容
      </template>
      <template v-slot:body>
        这是主体的内容
      </template>
      <template v-slot:footer>
        这是尾部的内容
      </template>
    </MyComponent>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <header>
      <slot name="header" />
    </header>
    <main>
      <slot name="body" />
    </main>
    <footer>
      <slot name="footer" />
    </footer>
  </div>
</template>

作用域插槽

作用域插槽允许在组件中定义一个占位符，然后在其他组件中填充这个占位符，并且可以访问父组件的数据和方法：

<!-- 父组件 -->
<template>
  <div>
    <MyComponent>
      <template v-slot:default="props">
        {{ props.message }}
      </template>
    </MyComponent>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot v-bind="props" />
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    message: {
      type: String,
      default: '这是默认消息'
    }
  }
}
</script>