UniApp在Vue3下使用setup语法糖创建和使用自定义组件

UniApp在Vue3下使用setup语法糖创建和使用自定义组件

在现代前端开发中，Vue 3 的 <script setup> 语法糖极大地简化了组件的编写和使用。本文将详细介绍如何在 UniApp 中使用 Vue 3 的 <script setup> 语法创建自定义组件，并在其他组件中使用这些自定义组件。

1. 创建自定义组件

首先，我们创建一个简单的自定义组件 MyComponent.vue。这个组件将接收一些属性，并展示一些基本内容。

MyComponent.vue

<template>
  <view :style="styleObject">
    <p v-if="showText">{{ text }}</p>
    <p>Number: {{ number }}</p>
    <p>Boolean: {{ boolean }}</p>
    <ul>
      <li v-for="item in array" :key="item">{{ item }}</li>
    </ul>
    <p>Object: {{ object.name }} - {{ object.age }}</p>
    <button @click="emitEvent">点击触发事件</button>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue';

// 定义接收的 props
const props = defineProps({
  text: {
    type: String,
    default: '默认文本'
  },
  number: {
    type: Number,
    default: 0
  },
  boolean: {
    type: Boolean,
    default: false
  },
  array: {
    type: Array,
    default: () => []
  },
  object: {
    type: Object,
    default: () => ({ name: '默认名字', age: 20 })
  }
});

// 定义触发的事件
const emit = defineEmits(['customEvent']);

// 计算属性，用于处理样式对象
const styleObject = computed(() => ({
  marginTop: props.number + 'px',
  color: props.boolean ? 'red' : 'black'
}));

// 方法：触发自定义事件
const emitEvent = () => {
  emit('customEvent', '这是一个自定义事件');
};
</script>

<style scoped>
/* 组件内的局部样式 */
button {
  margin-top: 10px;
}
</style>

详细解释

1.1 定义属性 (defineProps)

在 MyComponent.vue 中，我们使用 defineProps 来定义组件可以接收的属性。每个属性都有一个类型和默认值：

const props = defineProps({
  text: {
    type: String,
    default: '默认文本'
  },
  number: {
    type: Number,
    default: 0
  },
  boolean: {
    type: Boolean,
    default: false
  },
  array: {
    type: Array,
    default: () => []
  },
  object: {
    type: Object,
    default: () => ({ name: '默认名字', age: 20 })
  }
});

1.2 定义事件 (defineEmits)

我们使用 defineEmits 来定义组件可以触发的事件。在这个例子中，我们定义了一个名为 customEvent 的事件：

const emit = defineEmits(['customEvent']);

1.3 计算属性 (computed)

我们使用 computed 来创建一个计算属性 styleObject，它根据传递的 number 和 boolean 属性生成样式对象：

const styleObject = computed(() => ({
  marginTop: props.number + 'px',
  color: props.boolean ? 'red' : 'black'
}));

1.4 方法 (emitEvent)

我们定义了一个方法 emitEvent，当用户点击按钮时，触发 customEvent 事件，并传递一个消息：

const emitEvent = () => {
  emit('customEvent', '这是一个自定义事件');
};

2. 使用自定义组件

接下来，我们在另一个 .vue 文件中导入并使用这个自定义组件，同时传递属性和监听事件。

App.vue

<template>
  <view>
    <MyComponent 
      text="你好，世界！"
      :number="50"
      :boolean="true"
      :array="['苹果', '香蕉', '橙子']"
      :object="{ name: '张三', age: 30 }"
      @customEvent="handleCustomEvent"
    />
  </view>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue';

// 定义一个方法来处理自定义事件
const handleCustomEvent = (message) => {
  console.log('自定义事件触发:', message);
};
</script>

<style>
/* 页面级别的样式 */
</style>

详细解释

2.1 导入和使用自定义组件

在 App.vue 中，我们导入 MyComponent 并在模板中使用它，同时传递属性和监听事件：

<MyComponent 
  text="你好，世界！"
  :number="50"
  :boolean="true"
  :array="['苹果', '香蕉', '橙子']"
  :object="{ name: '张三', age: 30 }"
  @customEvent="handleCustomEvent"
/>

2.2 处理自定义事件

我们定义了一个方法 handleCustomEvent 来处理自定义事件 customEvent：

const handleCustomEvent = (message) => {
  console.log('自定义事件触发:', message);
};

总结

通过以上步骤，我们创建了一个自定义组件 MyComponent，并在 App.vue 中使用它。我们传递了多种类型的属性，并且监听了自定义事件。这种方式使得组件的复用性和可维护性大大增强。