Vue 3 组件通信指南：在应用程序中构建高效、可重用的 UI 组件

2023-10-01 04:46:23

Vue 3 中的组件通信方式

在 Vue 3 中，组件通信可以通过多种方式实现，每种方式都有其独特的特点和适用场景。让我们一一了解这些通信方式，以便您能够根据自己的需求选择最合适的方案。

1. Props 和 Emit

Props 和 Emit 是 Vue 3 中最常用的组件通信方式。Props 用于父组件向子组件传递数据，而 Emit 用于子组件向父组件发送事件。

Props

Props 是一个 JavaScript 对象，它包含了父组件想要传递给子组件的数据。子组件可以通过 props 属性访问这些数据。

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  }
}
</script>

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

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

Emit

Emit 用于子组件向父组件发送事件。子组件可以通过 emit 方法触发事件，父组件可以通过 v-on 指令来监听这些事件。

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

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello, Vue 3!')
    }
  }
}
</script>

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

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // Hello, Vue 3!
    }
  }
}
</script>

2. Setup 函数

Setup 函数是 Vue 3 中的一个新特性，它取代了之前的 beforeCreate 和 created 钩子函数。Setup 函数在组件实例化时被调用，它可以用来初始化组件的 props、状态和方法。

Setup 函数中的 Props 和 Emit

Setup 函数中可以使用 props 和 emit 来实现组件通信。与之前介绍的方式相比，这种方式更加简洁和灵活。

// 子组件
export default {
  setup(props, context) {
    const emit = context.emit

    const handleClick = () => {
      emit('message', 'Hello, Vue 3!')
    }

    return {
      handleClick
    }
  }
}

3. Provide 和 Inject

Provide 和 Inject 用于在组件树中共享数据。父组件可以通过 provide 方法提供数据，子组件可以通过 inject 方法来注入这些数据。

Provide

// 父组件
export default {
  provide() {
    return {
      message: 'Hello, Vue 3!'
    }
  }
}

Inject

// 子组件
export default {
  setup() {
    const message = inject('message')

    return {
      message
    }
  }
}

4. Refs

Refs 用于获取组件实例或 DOM 元素的引用。Refs 可以通过 ref 属性来设置，也可以通过 setup 函数中的 ref 对象来访问。

Refs 属性

<template>
  <div ref="myRef"></div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myRef) // DOM 元素
  }
}
</script>

Setup 函数中的 Refs 对象

export default {
  setup() {
    const myRef = ref(null)

    return {
      myRef
    }
  }
}

5. 事件总线

事件总线是一种全局的事件管理器，它允许组件在不直接引用彼此的情况下进行通信。组件可以通过发布事件和监听事件来实现通信。

发布事件

// 子组件
this.$root.$emit('message', 'Hello, Vue 3!')

监听事件

// 父组件
this.$root.$on('message', (message) => {
  console.log(message) // Hello, Vue 3!
})

6. 插槽

插槽允许组件将自己的内容插入到另一个组件的模板中。插槽可以通过 slot 标签来定义，也可以通过 scoped slot 来定义。

slot 标签

<!-- 父组件 -->
<template>
  <ParentComponent>
    <template v-slot:default>
      Hello, Vue 3!
    </template>
  </ParentComponent>
</template>

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

scoped slot

<!-- 父组件 -->
<template>
  <ParentComponent>
    <template #default="{ message }">
      Hello, {{ message }}!
    </template>
  </ParentComponent>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot message="Vue 3"></slot>
  </div>
</template>