Skip to content

Core API(入口、组件、宏)

本页覆盖 wevu 中最先接触的一组 API:应用入口、组件定义、<script setup> 宏与模板工具。每个 API 单独成段,便于按需跳转。

入口与组件定义

createApp()

  • 类型入口:CreateAppOptions / RuntimeApp
  • 用途:创建并注册小程序 App 运行时入口。
  • 说明:通常在 App 侧只调用一次。

defineComponent()

  • 类型入口:DefineComponentOptions / ComponentDefinition
  • 用途:定义页面/组件并接入 Wevu 生命周期与响应式。
  • 说明:Wevu 统一使用 Component() 模型。

Script Setup 宏

defineProps()

  • 类型入口:ComponentPropsOptions / ExtractPropTypes
  • 用途:声明组件 props。
  • 说明:支持对象写法与 TS 泛型写法。

withDefaults()

  • 类型入口:ExtractDefaultPropTypes
  • 用途:给类型化 props 设置默认值。
  • 说明:通常与 defineProps<T>() 配套。

defineEmits()

  • 类型入口:EmitsOptions / TriggerEventOptions
  • 用途:声明事件与参数类型。
  • 说明:支持对象/数组/泛型(含 named tuple)。

defineSlots()

  • 类型入口:VNode
  • 用途:声明 slots 类型。

defineExpose()

  • 类型入口:ComponentPublicInstance
  • 用途:显式暴露实例字段。

defineModel()

  • 类型入口:ModelBinding
  • 用途:声明 v-model 绑定。

defineOptions()

  • 类型入口:MiniProgramComponentOptions
  • 用途:在 <script setup> 中定义组件配置项。

mergeModels()

  • 类型入口:ModelBindingPayload
  • 用途:合并多路 model 绑定结果。

useModel()

  • 类型入口:ModelBinding
  • 用途:运行时读取/写入某个 model。

模板工具

useAttrs()

  • 类型入口:SetupContext
  • 用途:获取透传属性 attrs。

useSlots()

  • 类型入口:TemplateRefs
  • 用途:读取 slots。

useTemplateRef()

  • 类型入口:TemplateRef / TemplateRefValue
  • 用途:读取模板 ref 对应实例。

useNativeInstance()

  • 类型入口:SetupContextNativeInstance
  • 用途:在 setup 中访问原生页面/组件实例。

normalizeClass()

  • 类型入口:string
  • 用途:归一化 class 输入(对象/数组/字符串)。

normalizeStyle()

  • 类型入口:string
  • 用途:归一化 style 输入。

示例

宏能力示例(script setup)

vue
<script setup lang="ts">
import { useTemplateRef } from 'wevu'

interface Props {
  title?: string
  modelValue: number
}

const props = withDefaults(defineProps<Props>(), {
  title: '默认标题',
})

const emit = defineEmits<{
  'submit': [value: string]
  'update:modelValue': [value: number]
}>()

const model = defineModel<number>()
const inputRef = useTemplateRef('input')

function onSubmit(value: string) {
  emit('submit', value)
  emit('update:modelValue', model.value ?? 0)
  console.log(props.title, inputRef.value)
}

defineExpose({ onSubmit })
</script>
vue
<script setup>
import { useTemplateRef } from 'wevu'

const props = defineProps({ title: String, modelValue: Number })
const emit = defineEmits(['submit', 'update:modelValue'])
const model = defineModel()
const inputRef = useTemplateRef('input')

function onSubmit(value) {
  emit('submit', value)
  emit('update:modelValue', model.value ?? 0)
  console.log(props.title, inputRef.value)
}

defineExpose({ onSubmit })
</script>

Released under the MIT License.