template-composition.uvue

<template>
  <view class="page">
    <template v-if="dataInfo.isShow">
      <view class="title">{{ title }}</view>
    </template>
    <view class="show-botton" @click="handleShow">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</view>
    <template v-for="(item, index) in list" :key="index">
      <view class="item">{{ index + 1 }}.{{ item.name }}</view>
    </template>
    <button @click="goMapStyle">跳转绑定 Map 类型 style 页面</button>
  </view>
</template>

<script setup lang="uts">
type DataInfo = {
  isShow: boolean
}
type ListItem = {
  name: string
}

const dataInfo = reactive({
  isShow: false
} as DataInfo)

const title = ref<string>('hello')
const list = ref<ListItem[]>([
  {
    name: 'foo1'
  },
  {
    name: 'foo2'
  }
] as ListItem[])

const handleShow = () => {
  dataInfo.isShow = !dataInfo.isShow
}

const goMapStyle = () => {
  uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-composition' })
}

defineExpose({
  dataInfo,
  goMapStyle
})
</script>

<style>
.item {
  display: flex;
  flex-direction: row;
  margin: 15px;
  border: #eee solid 1px;
}
</style>