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

禹翔

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

在现代前端开发中，Vue 3 的

1. <script setup>

复制代码

语法糖极大地简化了组件的编写和使用。本文将详细介绍如何在 UniApp 中使用 Vue 3 的

1. <script setup>

复制代码

语法创建自定义组件，并在其他组件中使用这些自定义组件。

1. 创建自定义组件

首先，我们创建一个简单的自定义组件

1. MyComponent.vue

复制代码

。这个组件将接收一些属性，并展示一些基本内容。

1. MyComponent.vue

复制代码

1. <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({
   
2.   text: {
   
3.     type: String,
   
4.     default: '默认文本'
   
5.   },
   
6.   number: {
   
7.     type: Number,
   
8.     default: 0
   
9.   },
   
10.   boolean: {
    
11.     type: Boolean,
    
12.     default: false
    
13.   },
    
14.   array: {
    
15.     type: Array,
    
16.     default: () => []
    
17.   },
    
18.   object: {
    
19.     type: Object,
    
20.     default: () => ({ name: '默认名字', age: 20 })
    
21.   }
    
22. });// 定义触发的事件const emit = defineEmits(['customEvent']);// 计算属性，用于处理样式对象const styleObject = computed(() => ({
    
23.   marginTop: props.number + 'px',
    
24.   color: props.boolean ? 'red' : 'black'
    
25. }));// 方法：触发自定义事件const emitEvent = () => {
    
26.   emit('customEvent', '这是一个自定义事件');
    
27. };</script><style scoped>/* 组件内的局部样式 */button {  margin-top: 10px;}</style>

复制代码

详细解释
1.1 定义属性 (

1. defineProps

复制代码

)
在

1. MyComponent.vue

复制代码

中，我们使用

1. defineProps

复制代码

来定义组件可以接收的属性。每个属性都有一个类型和默认值：

1. const props = defineProps({
   
2.   text: {
   
3.     type: String,
   
4.     default: '默认文本'
   
5.   },
   
6.   number: {
   
7.     type: Number,
   
8.     default: 0
   
9.   },
   
10.   boolean: {
    
11.     type: Boolean,
    
12.     default: false
    
13.   },
    
14.   array: {
    
15.     type: Array,
    
16.     default: () => []
    
17.   },
    
18.   object: {
    
19.     type: Object,
    
20.     default: () => ({ name: '默认名字', age: 20 })
    
21.   }
    
22. });

复制代码

1.2 定义事件 (

1. defineEmits

复制代码

)
我们使用

1. defineEmits

复制代码

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

1. customEvent

复制代码

的事件：

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

复制代码

1.3 计算属性 (

1. computed

复制代码

)
我们使用

1. computed

复制代码

来创建一个计算属性

1. styleObject

复制代码

，它根据传递的

1. number

复制代码

和

1. boolean

复制代码

属性生成样式对象：

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

复制代码

1.4 方法 (

1. emitEvent

复制代码

)
我们定义了一个方法

1. emitEvent

复制代码

，当用户点击按钮时，触发

1. customEvent

复制代码

事件，并传递一个消息：

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

复制代码

2. 使用自定义组件

接下来，我们在另一个

1. .vue

复制代码

文件中导入并使用这个自定义组件，同时传递属性和监听事件。

1. App.vue

复制代码

1. <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) => {
   
2.   console.log('自定义事件触发:', message);
   
3. };</script><style>/* 页面级别的样式 */</style>

复制代码

详细解释
2.1 导入和使用自定义组件
在

1. App.vue

复制代码

中，我们导入

1. MyComponent

复制代码

并在模板中使用它，同时传递属性和监听事件：

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

复制代码

2.2 处理自定义事件
我们定义了一个方法

1. handleCustomEvent

复制代码

来处理自定义事件

1. customEvent

复制代码

：

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

复制代码

总结

通过以上步骤，我们创建了一个自定义组件

1. MyComponent

复制代码

，并在

1. App.vue

复制代码

中使用它。我们传递了多种类型的属性，并且监听了自定义事件。这种方式使得组件的复用性和可维护性大大增强。
到此这篇关于UniApp在Vue3下使用setup语法糖创建和使用自定义组件的文章就介绍到这了,更多相关UniApp Vue3 setup语法糖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/331185s2k.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！