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('事件名',参数)
相关推荐
一只小阿乐13 小时前
js流式模式输出 函数模式使用
开发语言·javascript·ai·vue·agent·流式数据·node 服务
伯远医学13 小时前
如何判断提取的RNA是否可用?
java·开发语言·前端·javascript·人工智能·eclipse·创业创新
全栈技术负责人13 小时前
Claw Code 系统架构与 Agent 运行机制解析
前端·系统架构·ai编程
人人常欢笑13 小时前
Grafana 表格自定义下载样式。
javascript·react.js·grafana
x-cmd14 小时前
[x-cmd] 专为 AI Agent 设计的无头浏览器,比 Chrome 速度快 9 倍且少用 16 倍内存 | Lightpanda
前端·chrome·ai·自动化·agent·浏览器·x-cmd
lifewange14 小时前
JavaScript是什么
开发语言·javascript·ecmascript
chxii14 小时前
Nginx 正则 location 指令匹配客户端请求的 URI
前端·nginx
qing2222222214 小时前
Linux:/var/log/journal 路径下文件不断增加导致根目录磁盘爆满
linux·运维·前端
Armouy14 小时前
Nuxt.js 学习复盘:核心概念与实战要点
前端·javascript·学习
safestar201214 小时前
React 19实战:Action、并发与性能,一次告别“意大利面状态”的升级
开发语言·javascript·vue.js