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('事件名',参数)
相关推荐
高桥凉介发量惊人5 分钟前
UI 与交互篇(1/6):组件化思路:从页面复制到可复用组件
前端
kyriewen5 分钟前
Generator 函数:那个能“暂停”的函数,到底有什么用?
前端·javascript·面试
进击的尘埃5 分钟前
驾驭Skill市场:从3000+技能包中筛出真正能打的20个
javascript
打酱油的D18 分钟前
01. Node.js 运行时
前端·后端
悟空瞎说22 分钟前
生产环境Node.js内存泄漏,定位+根治全流程(图文版)
javascript·node.js
是大强24 分钟前
Electron 打包用 junction 代替 symlink
前端·javascript·electron
哈__39 分钟前
ReactNative项目OpenHarmony三方库集成实战:lottie-react-native
javascript·react native·react.js
哈罗哈皮40 分钟前
trea也很强,我撸一个给你看(附教程)
前端·人工智能·微信小程序
就是个名称1 小时前
echart绘制天顶图
linux·前端·javascript
im_AMBER1 小时前
Leetcode 147 零钱兑换 | 单词拆分
javascript·学习·算法·leetcode·动态规划