关于props配置项
2022/3/3 6:15:15
本文主要是介绍关于props配置项,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
#功能:
props配置项用于为组件传递来自至外部数据。
#如何使用:
组件配置对象中:
<h1>{{ '组件中props:'+msg }}{{' 组件中property:'+property}}</h1>
//直接定义 props: ['msg'],//数组 //简单的类型检查 props: { msg: String }, //多条件检查 props: { msg: { type: String, //类型检查 required: ture, //是否为必填 default: 'hello!' //默认值(如果有了required就不用写) } },
对应组件在Html标签中:
<HelloWorld msg="componentMsg"/>
效果:
# 关于大小写
HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名,如果是使用字符串模板,那么这个限制就不存在了。(Vue官网-props)
# 关于静态prop与动态prop
若是使用静态prop,则只需要在使用prop时记得加上单引号或者双引号即可
<HelloWorld msg="componentMsg"/>
若是使用动态prop,则需要使用v-bind配合,让Vue知道这个数据不是字符串,否则prop所接受的值为字符串,如:
<HelloWorld msg="123"/> <!-- 字符串类型 --> <HelloWorld :msg="123" /> <!-- 数字类型 --> <HelloWorld msg="false"/> <!-- 字符串类型 --> <HelloWorld :msg="false" /> <!-- 布尔值类型 -->
# 关于修改props传进来的值
props的值时只读的,Vue会监测props是否被修改,并在prop受到修改时发出警告。
若是确实有需要修改porps所接收的值,可以将props接收的值赋值给data中的变量,然后根据需要修改data接收到的值。
props: { msg: String }, data() { return { msg_data: this.msg }; },
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
(Vue官网-props)
# 关于props与data的数据谁先存在
初始化顺序是先props后data
执行顺序beforeCreate ->inject -> Props -> Methods -> Data -> Computed -> Watch ->provide-> created
(谁先执行?props还是data或是其他? vue组件初始化的执行顺序详解)
# 关于为porp传入对象的一个情况
若有多个prop使用了同一个对象中的不同属性,这可以这样写,方便快捷
假设存在一个这样的对象:
msg: { id: 1, type: 'Massage' }
<HelloWorld :id="msg.id" :type="msg.type"/> <!-- 等价于--> <HelloWorld v-bind="msg"/>
将一个对象的所有 property 都作为 prop 传入,可以使用不带参数的
v-bind
(取代v-bind:prop-name
)(Vue官网)
这篇关于关于props配置项的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?