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('事件名',参数)
相关推荐
spencer_tseng1 分钟前
vue npm-cache log
vue.js·npm
xuankuxiaoyao2 分钟前
VUE.JS 实践 第一章
前端·javascript·vue.js
梦想的旅途210 分钟前
企业微信消息回调开发指南:如何实时接收并处理企微消息?
前端·机器人·自动化·企业微信
何中应11 分钟前
CentOS7安装高版本Node.js
前端·centos·node.js
じ星不离月か11 分钟前
【记录】 跑马灯无限滚动
前端·css·跑马灯·无限滚动
周淳APP11 分钟前
【HTTP1、HTTP2、HTTP3】
前端·网络·网络协议·http
夫唯不争,故无尤也15 分钟前
原始文档元数据metadata
java·前端·javascript·sql
恋猫de小郭17 分钟前
Flutter 3.41 iOS 键盘负优化:一个代码洁癖引发的负优化
android·前端·flutter
胡楚昊19 分钟前
XSS LAB通关笔记(1-16)
前端·笔记·xss
新晨43719 分钟前
cursor轻松实现代码搬迁
前端·ai编程·cursor