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('事件名',参数)
相关推荐
han_1 分钟前
JavaScript设计模式(四):发布-订阅模式实现与应用
前端·javascript·设计模式
27669582923 分钟前
租车帮(悟空)订单查询算法分析
java·服务器·前端·悟空·悟空app·租车帮·租车帮逆向
用户3266584037413 分钟前
如何初始化 TypeScript + Node.js 项目
javascript
__雨夜星辰__15 分钟前
TypeScript 入门学习笔记(面向对象 + 常用设计模式)
前端·学习·typescript
晚霞的不甘30 分钟前
HarmonyOS ArkTS 进阶实战:深入理解边距、边框与嵌套布局
前端·计算机视觉·华为·智能手机·harmonyos
_野猪佩奇_牛马版30 分钟前
ReACT Agent 开发知识点总结
前端
牛奶42 分钟前
你发送的消息,微信到底怎么送到的?
前端·websocket·http
酉鬼女又兒1 小时前
零基础快速入门前端DOM 元素获取方法详解:从代码到实践(可用于备赛蓝桥杯Web应用开发)
前端·javascript·职场和发展·蓝桥杯·js
牛奶1 小时前
为什么关掉浏览器再打开,你还是登录状态?
前端·网络协议·https
bjxiaxueliang1 小时前
一文掌握Python aiohttp:异步Web开发从入门到部署
开发语言·前端·python