vue3学习

  1. 响应式数据

    复制代码
     const searchFormState = reactive({})
     const searchFormRef = ref()

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

  1. 组件传值

    父传子

    属性传值 父组件给子组件传值属性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)
	
	```
  1. 生命周期

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

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

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

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

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

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
DKPT4 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
好好研究7 小时前
学习栈和队列的插入和删除操作
数据结构·学习
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器