uniapp vue3快速开发照抄模板(setup语法糖版本)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
<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>
GitHub 加速计划 / vu / vue
83
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)