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('事件名',参数)
相关推荐
U.2 SSD几秒前
Echart仪表盘示例
javascript·echarts
qq_1841776772 分钟前
前端自动部署项目到服务器
服务器·前端·javascript
非凡ghost4 分钟前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求
Never_Satisfied9 分钟前
在JavaScript / HTML / Node.js中,post方式的Content-Type属性的text的三种编码
javascript·node.js·html
C2X18 分钟前
Vue3.0 学习总结
前端
汤姆Tom20 分钟前
CSS 新特性与未来趋势
前端·css·面试
尘世中一位迷途小书童21 分钟前
🚀 pnpm + Monorepo 实战指南:现代前端项目管理的最佳实践
前端·架构
Never_Satisfied32 分钟前
在JavaScript / HTML中,Chrome报错Refused to execute inline script
javascript·chrome·html
杨超越luckly35 分钟前
HTML应用指南:利用GET请求获取全国中国建设银行网点位置信息
前端·arcgis·html·数据可视化·门店数据
王翼鹏36 分钟前
html 全角空格和半角空格
前端·html