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('事件名',参数)
相关推荐
上等猿3 分钟前
Ajax笔记
前端·笔记·ajax
Amo 67295 分钟前
css 编写注意-1-命名约定
前端·css
匹马夕阳10 分钟前
详细对比JS中XMLHttpRequest和fetch的使用
开发语言·javascript·ecmascript
customer0828 分钟前
【开源免费】基于SpringBoot+Vue.JS安康旅游网站(JAVA毕业设计)
java·vue.js·spring boot·后端·kafka·开源·旅游
长风清留扬39 分钟前
小程序开发实战项目:构建简易待办事项列表
javascript·css·微信小程序·小程序·apache
程序员_三木40 分钟前
从 0 到 1 实现鼠标联动粒子动画
javascript·计算机外设·webgl·three.js
点点滴滴的记录1 小时前
Java的CompletableFuture实现原理
java·开发语言·javascript
程序猿online1 小时前
nvm安装使用,控制node版本
开发语言·前端·学习
web Rookie1 小时前
React 中 createContext 和 useContext 的深度应用与优化实战
前端·javascript·react.js
男孩121 小时前
react高阶组件及hooks
前端·javascript·react.js