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('事件名',参数)
相关推荐
zeqinjie27 分钟前
Skills-Flutter 内测泄漏审核
前端·flutter·app
村上小树1 小时前
非常简单地学习一下shareDB的原理
前端·javascript
认真的薛薛1 小时前
阿里云: A记录 & CNAME
服务器·前端·阿里云
2301_815645381 小时前
css基础
前端·css
卤蛋fg61 小时前
VxeTable 实现表尾合计行并支持数据实时统计
vue.js
Hilaku1 小时前
求求你们🙏 ,别再换打包工具了?
前端·javascript·程序员
用户新1 小时前
V8引擎 精品漫游指南--Ignition篇(下 二) JavaScript 栈帧详解
前端·javascript
账号已注销free1 小时前
box-shadow完整用法
前端
得闲喝茶1 小时前
JavaScript在数据处理的应用
开发语言·前端·javascript·经验分享·笔记
杨大厨wd2 小时前
Vue3 业务组件封装别只会传 props:如何设计一个真正好用的组件
vue.js