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('事件名',参数)
相关推荐
A923A18 分钟前
【javaScript 原型精讲】
javascript·原型·原型链
卷帘依旧35 分钟前
手写throttle
javascript
lzhdim35 分钟前
SQL 入门 14:SQL 触发器与事件:自动化数据处理
linux·前端·数据库·sql·自动化
其实防守也摸鱼42 分钟前
Sqlmap:选取sqli-labs中less-8进行sqlmap注入测试
前端·css·网络·安全·web安全·less·sqli-labs
伯远医学1 小时前
Nat. Methods | 邻近标记技术:活细胞中捕捉分子互作的新利器
java·开发语言·前端·javascript·人工智能·算法·eclipse
莪_幻尘1 小时前
一份 AGENTS.md,让 AI 代码规范率从 60% 飙升到 95%
前端·ai编程·cursor
秋秋20231 小时前
🐴 给 AI 套缰绳:一个前端项目的 AI Harness 实战记录
前端
卷帘依旧1 小时前
React Fiber介绍
前端
研☆香1 小时前
es6的新特性介绍
前端·ecmascript·es6
不瘦80斤不改名1 小时前
JavaScript 基础语法完全指南
开发语言·javascript·ecmascript