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

通过defineProps定义属性,defineEmits定义事件,computed创建计算属性,emitEvent方法触发事件,在其他组件中导入并使用这些自定义组件,传递属性和监听事件,实现组件的复用性和可维护性,感兴趣的朋友跟随小编一起看看吧

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';// 定义接收的 propsconst 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);};

总结

通过

正文

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

目录