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('事件名',参数)
相关推荐
IT_陈寒2 分钟前
React的useEffect把我坑惨了,这种闭包问题谁能想到
前端·人工智能·后端
xuankuxiaoyao13 分钟前
VUE.JS实践--事件对象和计算属性
javascript·vue.js·ecmascript
前端老石人13 分钟前
表单与交互式元素
前端·css·html
果粒蹬i16 分钟前
自用超半年的免费 OCR 工具分享:告别付费,本地搭建更安心
前端·网络·ocr
朝阳58121 分钟前
M3U8 下载助手油猴脚本 - 完全使用指南
前端·javascript·windows
早點睡39021 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-sensors(设备传感器)
javascript·react native·react.js
kadog22 分钟前
GraphX:基于 WebGL 区间算术的 GPU 加速隐函数绘图器
前端·javascript·数学建模·webgl
utmhikari22 分钟前
【DIY小记】解决MacOS上Edge浏览器bilibili全屏卡顿的问题
前端·macos·性能优化·edge·bilibili
上单带刀不带妹23 分钟前
UniApp 页面跳转完全指南:5 种路由方式详解与实战对比
前端·javascript·vue.js·uni-app·跨端开发
大阿明26 分钟前
Node.js npm 安装过程中 EBUSY 错误的分析与解决方案
前端·npm·node.js