vue 组合方式使用方式

Vue 组件的组合方式是一种让不同组件之间共享逻辑的方法。组合组件可以使代码更加模块化、可重用和可维护。下面是一个示例：

假设我们有两个组件：一个是 `Button` 组件，另一个是 `Notification` 组件。我们想要在 `Button` 点击时显示一个 `Notification`。

首先，我们需要在 `Notification` 组件中添加一个 `show` 方法：

<template>
  <div v-if="visible">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: ''
    }
  },
  methods: {
    show(message) {
      this.visible = true
      this.message = message
      setTimeout(() => {
        this.visible = false
      }, 3000)
    }
  }
}
</script>

然后，我们可以在 `Button` 组件中使用 `Notification` 组件：

<template>
  <button @click="showNotification">Show Notification</button>
</template>

<script>
import Notification from './Notification.vue'

export default {
  components: {
    Notification
  },
  methods: {
    showNotification() {
      this.$refs.notification.show('Hello, Vue!')
    }
  }
}
</script>

在 `Button` 组件中，我们引入了 `Notification` 组件，然后在 `showNotification` 方法中，通过 `$refs` 获取到 `Notification` 组件实例，并调用 `show` 方法显示通知。

这就是 Vue 组件的组合方式的基本用法。