首页 > 网络编程 > JavaScript > javascript类库 > vue.js > UniApp Vue3 setup语法糖

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

2024-11-22 09:56:57 作者：漫天转悠

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

到此这篇关于UniApp在Vue3下使用setup语法糖创建和使用自定义组件的文章就介绍到这了,更多相关UniApp Vue3 setup语法糖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

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