Vue3 组件的编写方法

在 Vue3 的开发中，组件编写是构建高效、可维护应用的关键。掌握 Vue3 组件的编写方法，能极大提升开发效率与质量。

首先是创建组件的基础步骤。在 Vue3 里，我们可以使用 defineComponent 函数来定义一个组件。例如：

import { defineComponent } from 'vue';
const MyComponent = defineComponent({
  name: 'MyComponent',
  setup() {
    // 逻辑代码
  },
  template: '<div>这是我的组件</div>'
});
export default MyComponent;

这里，name 用于标识组件，setup 函数是 Vue3 新的配置项，用于组合式 API，在其中可以定义响应式数据、方法等。

接着是组件的props。props 用于从父组件向子组件传递数据。在子组件中定义props 如下：

import { defineComponent } from 'vue';
const ChildComponent = defineComponent({
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    return () => <div>{props.message}</div>;
  }
});
export default ChildComponent;

在父组件中使用时：

<template>
  <ChildComponent :message="parentMessage" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
const parentMessage = ref('来自父组件的消息');
</script>

组件的事件处理也很重要。子组件可以通过 $emit 触发自定义事件通知父组件。在子组件中：

import { defineComponent } from 'vue';
const ChildComponent = defineComponent({
  name: 'ChildComponent',
  setup(props, { emit }) {
    const handleClick = () => {
      emit('customEvent', '数据');
    };
    return () => <div @click="handleClick">点击我</div>;
  }
});
export default ChildComponent;

父组件监听事件：

<template>
  <ChildComponent @customEvent="handleChildEvent" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
const handleChildEvent = (data) => {
  console.log(data);
};
</script>

Vue3 组件还支持插槽，用于在组件中插入自定义内容。比如定义一个带插槽的组件：

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script setup>
</script>

使用时：

<template>
  <MyComponent>
    <p>插入的内容</p>
  </MyComponent>
</template>
<script setup>
import MyComponent from './MyComponent.vue';
</script>

通过以上方法，我们可以灵活地编写 Vue3 组件，构建出功能强大、结构清晰的应用程序。