<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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐