Vue3-组合式API下的父传子和子传父

组合式API下的父传子

基本思想:

1.父组件中给子组件绑定组件

2.子组件内部通过props选项接收

复制代码
const props=defineProps({属性名:类型})

由于script上写了setup,所以无法直接配置props选项,所以需要借助于"编译器宏"函数接收传递的数据

js中访问传递的数据:props.变量名

模板中:{{变量名}}

如果传递的是一个变量,那么父组件中引入的子组件传递的数据要写成:

复制代码
<SonCom :message="message"></SonCom>

defineProps原理:就是编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换

组合式API下的子传父

基本思想:

1.父组件中给子组件标签通过@绑定事件

2.子组件内部通过emit方法触发事件

复制代码
const emit=defineEmits(['事件名'])
emit('事件名',参数)
相关推荐
李明卫杭州3 分钟前
JavaScript 严格模式下 arguments 的区别
前端·javascript
swipe6 分钟前
向量数据库实战:为什么 AI Agent 离不开 Milvus
前端·面试·agent
小锋学长生活大爆炸16 分钟前
【教程】Edge浏览器中可以提升性能的flags
前端·edge
苍舒墨18 分钟前
如何借助Github pages部署React+vite静态前端项目
前端
曹牧28 分钟前
JSON 数组的正确使用方式
java·服务器·前端
一次旅行28 分钟前
今日心理学知识分享(三)
开发语言·javascript·程序人生·ecmascript
小村儿1 小时前
一起吃透 Claude Code,告别 AI 编程迷茫
前端·后端·ai编程
牛十二1 小时前
openclaw安装mcporter搜索小红书
开发语言·javascript·ecmascript
小金鱼Y1 小时前
🔥 前端人必看:浏览器安全核心知识点全解析(XSS/CSRF/DDoS)
前端·javascript·安全
时寒的笔记1 小时前
js逆向05_ob混淆花指令,平坦流,某麦网(突破ob混淆寻找拦截器)
开发语言·前端·javascript