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('事件名',参数)
相关推荐
南屿im1 分钟前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon2 分钟前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子2 分钟前
深入解析CSRF攻击
前端·安全·面试
JustHappy3 分钟前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构
每天开心3 分钟前
🧙‍♂️闭包应用场景之--防抖和节流
前端·javascript·面试
hxmmm8 分钟前
webpack多入口打包文件
前端
CAD老兵10 分钟前
前端组件库的多主题实现原理与实战指南
前端
归于尽12 分钟前
Generator?从 yield 卡壳,到终于搞懂协程那点事
前端·javascript
FogLetter12 分钟前
React组件开发进阶:本地存储与自定义Hooks的艺术
前端·javascript·react.js
支撑前端荣耀16 分钟前
五、测试用例的组织和编写
前端