Vue3.0 — props写法

父组件向子组件传值

父组件

通过属性传值

<children :content="x"/>

子组件

声明props，并通过setup参数一props接收

props: {content: {type: String,default: 'hhh'}
}
setup(props) {let content = props.content  // 拿到父组件传过来的content变量数据
}

子组件向父组件传值

子组件

通过setup第二个参数context中的emit方法向上触发事件

setup(props,{ emit }) {emit("memberClick", "member") // ("事件名"，"参数")
}

父组件

监听子组件触发的事件，事件同样定义在setup入口函数中

<children @memberClick="checkoutMember"/>
setup() {checkoutMember(value) {console.log(value)  // 进行相关操作}
}

Vue3.0 — props写法相关推荐

vue3.0的写法以及setup的用法
vue3.0的写法一.setup的特性二.vue2.0与vue3.0用法的区别三.setup用法一.setup的特性 1.setup函数是处于生命周期函数beforeCreate 和 Crea ...
vue3.0 父子组件通信
子传父:子组件调用父组件方法 vue3.0不再支持this,所以this.$emit()方法不在被支持. 以下为VUE3.0新写法子组件: <script> import { defin ...
关于 vue3.0 实战项目 setup、 props、 reactive、ref
关于 vue3.0 实战项目中遇到的问题介绍vue3.0的特性: 亿点小知识 1.diff算法的优化增加了静态标记PatchFlag 2.按需编译,体积比Vue2.x更小(Tree shaking ...
vue3.0中props父子传值的改动
前言: 对vue3.0的学习以及对技术更新升级内容的整理与使用,这里分析下他的props父子传值的改动. vue官方入口目录一.vue2.0中props的用法 1.父组件中 a.vue中 2.子组 ...
vue 不识别svg_vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg...
注意: 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev ...
Vue3.0 组合式 API 分析与实践
本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...
/** * @Desc Vue3.0虚拟滚动条组件V3Scroll * @Time andy by 2021-01 * @About Q:282310962 wx:xy190310*/ props: ...
onmounted vue3_基于项目时间阐述vue3.0新型状态管理和逻辑复用方式
作者:Mingle 转发链接:https://mp.weixin.qq.com/s/iOq-eeyToDXJ6lvwnC12DQ 前言背景:2019年2月6号,React 发布「16.8.0」版 ...
pb调用键盘钩子的例子_搞不动Vue3.0的源码，先做个API调用师也行（新人踩坑初试）...
作为一个刚刚入行工作不久的前端菜鸟,Vue2.x都没整熟练.但看着身边人都在学习Vue3,我也不敢怠慢,毕竟Vue3正式版已经发布两个月了,我还是耐着性子好好的阅读了一下Vue3.0的文档.没有其他大 ...

Vue3.0 — props写法

父组件向子组件传值

父组件

子组件

子组件向父组件传值

子组件

父组件

Vue3.0 — props写法相关推荐

最新文章

热门文章