首页
视频
资源
登录
风清月
愿你出走半生,归来仍是少年
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
mvc
9篇
c#面试题
1篇
爬虫
1篇
Redis
1篇
NET
37篇
JS相关
2篇
Oracle
1篇
随笔
30篇
学点小英语
9篇
Vue.js
3篇
jquery
2篇
Sqlerver
7篇
前端
53篇
ps
1篇
net core
39篇
更多
架构
9篇
rpc
1篇
EF
6篇
mui
8篇
微服务
8篇
微信
1篇
.net
5篇
svn
1篇
人工智能
6篇
nginx
4篇
docker
14篇
git
4篇
c++
3篇
linux
11篇
uniapp
7篇
k8s
23篇
python
3篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
转
vue组件间传参。vue组件间传递参数。vue组件参数类型
5235
人阅读
2022/10/13 20:56
总访问:
1601719
评论:
0
收藏:
0
手机
分类:
前端
### 一、父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收。 在父组件的子组件标签中绑定自定义属性 ``` // 父组件 <user-detail :myName="name" /> export default { components: { UserDetail } ...... } ``` 在子组件中使用props(可以是数组也可以是对象)接收即可。可以传多个属性。 ``` // 子组件 export default { props: ['myName'] } /* props: { myName: String } //这样指定传入的类型,如果类型不对会警告 props: { myName: [String, Number] } // 多个可能的类型 prosp: { myName: { type: String, requires: true } } //必填的的字符串 props: { childMsg: { type: Array, default: () => [] } } // default指定默认值 如果 props 验证失败,会在控制台发出一个警告。 */ ``` **子组件接收的父组件的值分为引用类型和普通类型两种:** 普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null) 引用类型:数组(Array)、对象(Object) 基于 vue 的单向数据流,即组件之间的数据是单向流通的,子组件是不允许直接对父组件传来的值进行修改的,所以应该避免这种直接修改父组件传过来的值的操作,否则控制台会报错。 **常用类型的使用示例:** ``` // 组件参数 props: { percentage: { type: Number, default: 0 }, title: { type: String, default: '' }, show: { type: Boolean, default: false }, // 列配置 columnsConfg: { type: Array, default: () => { return [] }, }, // 数据项 rowdata: { type: Array, default: () => { return [] }, // required: true } // 对象参数 datas: { type: Object, default: () => { return {CompleteRate:50,PassRate:60,TrueRate:80} }, } }, ``` - 如果传过来的值是简单数据类型,是可以在子组件中修改,也不会影响其他兄弟组件内同样调用了来自该父组件的值。 - 具体操作是可以先把传过来的值重新赋值给data中的一个变量,然后再更改那个变量。 ``` // 子组件 export default { props: ['myName'], data() { return { name : this.myName // 把传过来的值赋值给新的变量 } }, watch: { myName(newVal) { this.name = newVal //对父组件传过来的值进行监听,如果改变也对子组件内部的值进行改变 } }, methods: { changeName() { this.name = 'Lily' // 这里修改的只是自己内部的值,就不会报错了 }, } } ``` 注:如果不使用 watch 来监听父组件传递的 myName 值,子组件中的 name 值是不会随着父组件的 myName 值进行改变,因为 data 中 name: this.myName 仅仅只是定义了一个初始值。 如果引用类型的值,当在子组件中修改后,父组件的也会修改,因其数据是公用的,其他同样引用了该值的子组件也会跟着被修改。可以理解成父组件传递给子组件的值,就相当于复制了一个副本,这个副本的指针还是指向父组件中的那个,即共享同一个引用。所以除非有特殊需要,否则不要轻易修改。 原文:https://www.php.cn/vuejs/474702.html
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}