TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
忆点点
情不知从何起,一往而情深
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
35篇
.net core
15篇
cdn
1篇
云服务
1篇
前端
72篇
后端
6篇
随笔
19篇
架构
1篇
linux
6篇
git
3篇
virtualbox
1篇
app
1篇
英语
4篇
redis
4篇
docker
4篇
更多
mysql
6篇
sqlsugar
4篇
uni_app
4篇
数据库
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue3中父子组件传值,传参。vue3 defineProps 传参默认值。方法调用
1676
人阅读
2023/8/5 21:15
总访问:
783197
评论:
0
收藏:
0
手机
分类:
前端
### 1、父向子 在子组件上自定义一个属性,属性名随意 ,属性值是你要传的参数。 ``` <template> <div class="home"> <HelloWorld :index="num" /> //子组件 </div> </template> ``` 然后在子组件代码script标签中,导入definePops 这个方法,定义一个常量props用来接收父组件传过来的值,就可以了。 ``` <script setup> import {ref ,defineProps} from "vue"; const props = defineProps({ index:{} } </script> ``` 页面上这么使用: ``` <template> <div class="hello"> <h2>{{ index }}</h2> </div> </template> ``` #### 如果有默认值可以这样 ``` const props = defineProps({ schoolId: String, taskIds: { type: [] as any, default:[] } }) ``` #### 如果是转递的多个可以这样使用 传递: ``` <OceanFreightTableEdit title="海运费" :isCanEditOceanFreight="ruleForm.isCanEditOceanFreight" ref="OceanFreightTableEditRef"></OceanFreightTableEdit> ``` 接收 ``` const props = defineProps({ title: String, isCanEditOceanFreight: Boolean }) ``` 取值: ``` <el-checkbox v-if="props.isCanEditOceanFreight" checked="true" disabled="true" v-model="isCanEdit" size="default" /> ``` 取值直接可以这样:props.isCanEditOceanFreight,props.title这种。 tn4>注意:父向子传参数的时候要注意时机问题哦,比如要传递的某个参数要从接口里边查询回来,然后组件的加载要比接口数据返回回来之前被加载了,这样传递到组件里边的参数永远都是默认的参数,不会是从接口回来的参数,所以这种情况就要进行处理,可以考虑等接口返回回来了在去加载组件,或者在子组件里边去监听一下父组件传递参数的值的变化也可以。 ### 2、子向父 在子组件声明一个任意常量,用于定义传输参数的方法,名字自定义。 ``` const emit = defineEmits(["updateNum"]); ``` 同时在子组件中定义一个方法去触发emit这个方法, ``` emit('updateNum',value) //value是传给父元素事件的参数 ``` 父组件中子组件标签上加一个方法,调用方法参数就是子组件传给父组件的参数 ``` <template> <div class="home"> <HelloWorld @undataNum='getNum' :index="num" /> </div> </template> <script> const getNum =(value)=>{ console.log(value);//value为传过来的参数 } </script> ``` #### 子向父还有一种方法 在子组件中导入defineExpose方法,把你想要传的参数抛出去 ``` <script setup> import { ref, defineProps, inject, defineExpose } from "vue"; const numPlus = ref(1); defineExpose({ numPlus}); </script> ``` 在父组件中子组件的标签上接收ref,名字自定义 ``` <HelloWorld :index="num" ref="treeRef" /> ``` 然后再页面直接打印就可以了 ``` console.log(treeRef.value.numPlus); ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}