uniapp vue3快速开发照抄模板(setup语法糖版本)

<script setup>
import { ref, onMounted, computed,getCurrentInstance } from "vue";
import { onShow,onHide,onLoad } from "@dcloudio/uni-app"; // 非vue的生命周期
import ChildComponent form 'xxxx'//子组件路径
const { proxy } = getCurrentInstance()
// emit对象,子组件抛出时间
const emit = defineEmits(["click"]);
// props演示
let props = defineProps({
  str1: {
    // 组件id
    type: String,
    default: '',
  },
})
//#region 代码分组，可折叠

//#endregion
//#region 生命周期事件
onMounted(()=>{
  console.log("应用挂载完成")
})
// onLoad中获取参数
onLoad((option) => {
  // 在这里发起调用接口等行为
});
onShow(()=>{
})
//#endregion
function loadData(){
}
//点击事件
function clickBtn(){
let components = proxy.$refs.childrenRef.xxx();
let d=1;//参数
emit('click',d)
}
// 调用组件方法

//暴露方法，父组件可以ref获取
defineExpose({
  loadData,
})
let a = ref(1)
let b = ref(2)
//计算属性
let c = computed(() => {
  return a.value + b.value
})
// watch值变化
watch(
  () => props.str1,
  (newValue, oldValue) => {
    loadData()
  },
  { immediate: true ,deep:true}
)
</script>

<template>
     <view>
     <view @click='clickBtn'> 调用子组件内部事件</view>
     <!-- 子组件 -->
     <ChildComponent ref='childrenRef'> </ChildComponent>
    </view>
</template>

<style lang="scss" scoped>
</style>