Vue3 如何使用复用组件

在 Vue3 的项目开发中，复用组件是提高开发效率、优化代码结构的关键。合理运用复用组件，能让代码更加简洁、易于维护。下面我们就来探讨一下 Vue3 如何使用复用组件。

首先是创建组件。在 Vue3 里，使用 defineComponent 函数来创建一个组件。例如，创建一个简单的按钮组件：

import { defineComponent } from 'vue';
const MyButton = defineComponent({
  template: '<button>{{ buttonText }}</button>',
  data() {
    return {
      buttonText: '点击我'
    };
  }
});
export default MyButton;

这样一个基础的可复用按钮组件就创建好了。

接下来是组件的注册。Vue3 支持全局注册和局部注册两种方式。全局注册适合应用中多处都要用到的通用组件。在 main.js 里进行全局注册：

import { createApp } from 'vue';
import MyButton from './components/MyButton.vue';
const app = createApp({});
app.component('MyButton', MyButton);
app.mount('#app');

局部注册则是在需要使用组件的父组件中进行注册。例如在 Home.vue 中使用：

import { defineComponent } from 'vue';
import MyButton from './components/MyButton.vue';
export default defineComponent({
  components: {
    MyButton
  }
});

然后在 Home.vue 的模板里就可以直接使用 <MyButton /> 标签了。

组件间的数据传递也是复用组件时的重要环节。父组件向子组件传递数据可以通过 props。在子组件 MyButton.vue 里定义 props：

import { defineComponent } from 'vue';
const MyButton = defineComponent({
  template: '<button>{{ buttonText }}</button>',
  props: {
    buttonText: {
      type: String,
      default: '点击我'
    }
  }
});
export default MyButton;

在父组件中使用时，就可以通过 :buttonText 来传递不同的值：<MyButton :buttonText="customText" />。

子组件向父组件传递数据则通过事件。在子组件 MyButton.vue 里触发事件：

import { defineComponent } from 'vue';
const MyButton = defineComponent({
  template: '<button @click="handleClick">点击我</button>',
  methods: {
    handleClick() {
      this.$emit('button-clicked');
    }
  }
});
export default MyButton;

在父组件中监听这个事件：<MyButton @button-clicked="onButtonClicked" />。

掌握这些 Vue3 复用组件的方法，能极大提升开发效率，让项目的代码架构更加清晰，为构建大型应用打下坚实基础。