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('事件名',参数)
相关推荐
码途潇潇21 分钟前
JavaScript有哪些数据类型?如何判断一个变量的数据类型?
前端·javascript
满天星辰23 分钟前
Vue真的是单向数据流?
前端·vue.js
细心细心再细心24 分钟前
Nice-modal-react的使用
前端
我的写法有点潮1 小时前
JS中对象是怎么运算的呢
前端·javascript·面试
悠哉摸鱼大王1 小时前
NV12 转 RGB 完整指南
前端·javascript
一壶纱1 小时前
UniApp + Pinia 数据持久化
前端·数据库·uni-app
双向331 小时前
【RAG+LLM实战指南】如何用检索增强生成破解AI幻觉难题?
前端
海云前端11 小时前
前端人必懂的浏览器指纹:不止是技术,更是求职加分项
前端
青莲8431 小时前
Java内存模型(JMM)与JVM内存区域完整详解
android·前端·面试
boooooooom1 小时前
深入浅出 Vue3 defineModel:极简实现组件双向绑定
vue.js