vue3学习

* 响应式数据 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 等

• « 上一篇：欧姆龙以太网模块如何设置ip连接 Kepware opc步骤
• » 下一篇：【HCIA】10.VLAN间通信