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('事件名',参数)
相关推荐
Hello--_--World12 小时前
节流 VS 防抖 相关知识点与面试题
前端·javascript
We་ct13 小时前
AI辅助开发术语体系深度剖析
开发语言·前端·人工智能·ai·ai编程
去伪存真13 小时前
Superpowers 从“调教提示词”转向“构建工程规范”
前端·agent
发现一只大呆瓜13 小时前
深度起底 Vite:从打包流程到插件钩子执行时序的全链路解析
前端·vite
jserTang13 小时前
Claude Code 源码深度解析 - 前言
前端·javascript·后端
hehelm13 小时前
vector模拟实现
前端·javascript·算法
|晴 天|13 小时前
[特殊字符]️ Vue 3项目架构设计:从2200行单文件到24个组件
前端·javascript·vue.js
Ruihong13 小时前
Vue v-html 与 v-text 转 React:VuReact 怎么处理?
vue.js·react.js·面试
Fisschl13 小时前
Vue 封装 Echarts 组件
vue.js
FrontAI13 小时前
深入浅出 LangChain —— 第三章:模型抽象层
前端·人工智能·typescript·langchain·ai agent