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

<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>

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', '这是一个自定义事件');
};

<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>

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

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