* 响应式数据 const searchFormState = reactive({}) const searchFormRef = ref()
两者差不多,reactive()多用于复杂数据结构 ref()多用与简单数据结构

* 组件传值
<>父传子
属性传值 父组件给子组件传值属性aa值为data :aa="data"
子组件接收数据方法 引入definePropsconst props = defineProps({ // 可以拿到它的值 aa: {
type:Boolean, default: false }, }) 使用 const bb = props.aa
<>子传父
子组件使用事件触发 引入defineEmits // 定义emit事件 const emit = defineEmits({ checkedItem:
null, checkedGroupListItem: null }) .... ///触发checkedItem事件,传递item数据
emit('checkedItem', item) 父组件监听 <zujian @checkedItem="checkedItem" /> const
checkedItem=(item)=>{ ... }
<>子组件中的方法需要暴露出去才能被父组件调用
``` // 在子组件中抛出 onOpen方法 defineExpose({ onOpen }) ``` ``` //父组件中可通过ref调用
<zujian ref="aaRef" @checkedItem="checkedItem" />` const aaRef= ref()
aaRef.onOpen(record) ```
*
生命周期

Vue3 的生命周期函数包括
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
等。

beforeCreate 函数是整个 Vue3
实例创建的第一个生命周期函数它会在实例初始化之前调用,可以用来对实例进行初始化,在这个函数里可以定义一些全局变量,以及添加一些指令、过滤器等

created 函数会在 beforeCreate
函数之后调用,这个生命周期函数用于处理数据和事件,可以在这里做一些数据处理,如获取服务器数据,定义一些自定义事件,以及定义一些全局方法等

beforeMount 函数会在 created 函数之后调用,它用于处理 DOM操作,在这个函数里可以检查 DOM 是否正确渲染,也可以定义一些 DOM
操作,比如给某个元素设置属性,添加一些事件等。

mounted 函数会在beforeMount 函数之后调用,它是 Vue3实例挂载完成后调用的函数,可以在这里定义一些 DOM
操作,比如改变某个元素的样式,添加某个 class 等

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信