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

news/2024/11/23 5:15:35/

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,它根据传递的 numberboolean 属性生成样式对象:

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


http://www.ppmy.cn/news/1549214.html

相关文章

Cesium 加载B3DM模型

一、引入Cesium&#xff0c;可以使用该链接下载cesium 链接: https://pan.baidu.com/s/1BRQyaFCkxO2xQQT5RzFUCw?pwdkcv9 提取码: kcv9 在index.html文件中引入cesium <script type"text/javascript" src"/Cesium/Cesium.js"></script> …

如何从gitee中下载开源项目代码

平时我们从gitee中学习别人的项目时&#xff0c;可以把它下载到本地&#xff0c;那么如何下载呢&#xff0c;本篇文章为详细讲解一下&#xff1a; 假如说我们要学习下面的这个项目&#xff1a; 以若依框架为基础创建的权限管理系统&#xff0c;点进去之后点击 “克隆/下载” …

【element-tiptap】Tiptap编辑器核心概念----结构篇

core-concepts 前言&#xff1a;这篇文章来介绍一下 Tiptap 编辑器的一些核心概念 &#xff08;一&#xff09;结构 1、 Schemas 定义文档组成方式。一个文档就是标题、段落以及其他的节点组成的一棵树。 每一个 ProseMirror 的文档都有一个与之相关联的 schema&#xff0c;…

笔记记录 k8s操作

docker下载arm架构的镜像 docker pull centos --platform arm64 其中华为鲲鹏、飞腾CPU采用的是ARM架构,龙芯采用的是MIPS架构,而兆芯、海光CPU采用的是X86架构,申威采用的是Alpha架构 docker查看容器的日志文件目录 docker inspect --format={{.LogPath}} containername…

奶龙IP联名异军突起:如何携手品牌营销共创双赢?

在快节奏的互联网消费时代&#xff0c;年轻消费群体对产品和品牌的要求越来越挑剔。因此在品牌年轻化的当下&#xff0c;一方面需要品牌自身形象也要不断追求时代感&#xff0c;另一方面品牌也需要不断引领消费者需求&#xff0c;提升竞争力和产品力。 奶龙作为近年来异军突起…

零基础学Python之数据结构 -- 01篇

一、数据结构的概念 1.1 数据的具体介绍 数据&#xff1a;能够被计算机识别、存储等操作&#xff0c;用于描述客观事物的符号数据分类&#xff1a; 数值数据&#xff1a;整数、小数、字符串...非数值数据&#xff1a;视频、音频、图像...数据的组成&#xff…

ubuntu, 安装部署comfyui,记录2:下载模型GGuf及测试

0.清除工作流 1.安装manager 2024年最新ComfyUI汉化及manager插件安装详解&#xff01;_comfyui-manager-CSDN博客 ComfyUI Manager安装 转到ComfyUI的安装目录ComfyUI/custom_nodes; 使用git拉取ComfyUI Manager&#xff0c;git clone https://github.com/ltdrdata/Comf…

【东莞石碣】戴尔R740服务器维修raid硬盘问题

1&#xff1a;石碣某塑料工厂下午报修一台戴尔R740服务器硬盘故障&#xff0c;催的还比较着急。 2&#xff1a;工程师经过跟用户确认故障的问题以及故障服务器型号和故障硬盘型号&#xff0c;产品和配件确认好后&#xff0c;公司仓库确认有该款硬盘现货&#xff0c;DELL 12T S…