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 中使用它。我们传递了多种类型的属性，并且监听了自定义事件。这种方式使得组件的复用性和可维护性大大增强。