响应式数据

复制代码

 const searchFormState = reactive({})
 const searchFormRef = ref()

两者差不多，reactive(）多用于复杂数据结构 ref()多用与简单数据结构

组件传值

父传子

属性传值父组件给子组件传值属性aa值为data :aa="data"
子组件接收数据方法引入defineProps

复制代码

const 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 等

vue3学习

父传子

子传父

子组件中的方法需要暴露出去才能被父组件调用