-
2021-02-04 23:58:55
VUE组件的props属性
- vue组件可以通过props属性来从父组件获取值
- props属性可以有以下几种写法
// 数组写法 props: ['title', 'content', 'like'] // 对象写法 - 1 props: { title: String, // 指定title的类型,设置title只能是String类型的 content: undefine, // undefine和null表示content可以是任何类型的 like: [String, Number], // like可以是数组中的任意类型 } // 对象写法 - 2 props: { title: { type: String, // type指定属性类型,用法同上 default: 'title', // default指定默认值 }, content: { type: String, required: ture, // reuired声明属性是否是必须的,即父组件是否必须传值 }, like: { type: Number, validator: val => { // 自定义验证函数 return val > 100 }, } }
- 一般情况下,我们都是使用最后一种写法,即props中的每个属性都是一个对象,我们先称它们为prop对象
- 每个prop对象都可以有如下属性
- type
- 该属性指明prop的类型,type的值可以是下列原生构造函数中的一个
[String, Boolean, Number, Array, Object, Date, Function, Symbol]
- 也可以是
null
或者undefine
,表示prop可以是任何类型的 - 或者是一个自定义的构造函数,这会通过instanceof的方式来进行比较,来验证prop的值是否是通过new对应的构造函数创建的
props: { user: { // user = new Persion() type: Persion } }
- 该属性指明prop的类型,type的值可以是下列原生构造函数中的一个
- default
- 该属性为prop设定一个默认值,父组件传的值将会覆盖该默认值
- required
- 该属性的值是一个布尔值,表明prop是否是必须的,即父组件是否必须传值
- vaildator
- 该属性的值是一个函数,有一个参数是prop当前的值,返回一个布尔值,使用方式如上
- 当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告
注意那些 prop 会在一个组件实例创建之前进行验证,所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的
- type
- props中的属性是通过单向数据流的方式从父组件传到子组件的
- 这意味着:
- props中的属性只能通过父组件来更新
- 子组件不能直接通过
this.prop = xx
的方式来更新props中的属性 - 子组件要更新props中的属性,可以使用如下两种方式
// 父组件 <Children :msg.sync="msg" /> // ... data() { return { msg: 'original' } } // 子组件 props: { msg: { type: String, } } methods: { handleChange() { // 触发handleChange方法后改变msg this.$emit('update:msg', 'change') } }
--- 子组件 props: { value: { type: [Number, String], }, changeMsg: { type: Function, default: () => { }, } }, data () { return { msg: this.value } }, methods: { handleChangeMsg () { this.msg = 'change' this.$emit('input', this.msg) } } --- 父组件 <template> {{ msg }} </template> <script> export default { name: 'Home', components: { Children }, data () { return { msg: 'original', } } }
更多相关内容 -
简单理解vue中Props属性
2020-09-01 08:56:48主要帮助大家简单的理解vue中Props属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
Vue 使用Props属性实现父子组件的动态传值详解
2020-12-30 01:02:47如下所示: <!DOCTYPE html> <html lang=en xmlns:v-on=http://www.w3.org/1999/xhtml> <head> <meta charset=UTF-8> <title>Title</title>...child v-bind:my-message -
解决vue组件props传值对象获取不到的问题
2020-10-16 20:59:42主要介绍了vue组件props传值,对象获取不到的问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 -
Vue中props属性
2021-11-30 14:25:55props功能:让组件接受外部传过来的数据 (1):传递数据:<Demo name="xxx"/> (2):接受数据: 第一种:(只接收):props: ['name'] 第二种:(限制类型):props:{ name:Number } 第三种:(限制...props功能:让组件接受外部传过来的数据
(1):传递数据:<Demo name="xxx"/>
(2):接受数据:
第一种:(只接收):props: ['name']
第二种:(限制类型):props:{ name:Number }
第三种:(限制类型,限制必要性,指定默认值):
props: { name: { type: String, required: true, default: 'hhh' } }
备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,
若业务需求确实需要修改,那么请复制props的内容在data中声明一份,然后去修改data
中的数据。
在URL中props的传参
第一种写法:props值为对象,该对象中所有的key-value的组合
最终都会通过props传给Wea组件
props: {id:123456}
第二种写法:props值为布尔值 true,则把路由收到的所有params
参数通过props传过去
第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传过去
{ path: '/wea/:id', name: 'Wea', component: Wea, props:function(route){ console.log(route); return { id:route.params.id, //params 指的是 / 中的参数 liangzai:route.query.liangzai // query 指的是 ? 后的参数 } }, }, 或写成 props(route){ return { id:route.params.id, liangzai:route.query.liangzai } },
-
vue中使用props传值的方法
2021-01-21 11:38:561.静态传值(在父组件中赋值好props中属性的值传递给子组件) 父组件 <input v-model=message> <child message=hello></child> [removed] import child from './components/child.vue' export ... -
vue中组件的props属性(详)
2021-10-27 17:15:27今天这篇文章,让你彻底学会props属性…… props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。今天这篇文章,让你彻底学会props属性……
props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。
问题一:那props具体是怎么使用呢?原理又是什么呢?往下看
1、【定义被调用组件】首先,我们先定义一个person组件,用于显示个人信息的组件,我们放了一个人的姓名,性别,以及年龄,定义好这个组件之后,就可以等待其他组件进行调用。那么既然别的组件可以调用,我们就需要再定义一个props属性,用于接收别的组件传进来的值。
注意:组件中name、sex、age都是一个prop,将三个属性放到一起,就是props,这就是props的由来,是prop的复数形式,代表多个prop属性的集合。
2、【调用组件】此时我们再定义一个info组件,用于展示这个人的基本信息,进行对person组价的调用实现信息的展示,分为下图四个步骤进行调用。并传入参数
3、【看效果】传入成功。
问题二:那如果我们想给年龄加1岁,怎么实现?
我们可能会直接这样加1
看效果是否能实现,变成19,看下图显然是不正确的。因为你传入的年龄是个字符串18,所以加1只会在18后面进行拼接。
然后有的人说,那传数字,怎么传数字呢?很简单,一个符号搞定。
我们只需要在age前面加上冒号 :他就会只识别双引号里面的东西18 ,否则识别的是双引号18
看下效果,此时就成功了。
问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型?肯定是数字类型,但是有人非要传字符串类型,就会影响我们对年龄的计算,比如上面的加1……那么我们如何限制类型呢?
这时候props不能再用[]去定义,需要用{},因为限制类型时,props就是作为一个对象去使用;
下面就是我们将三个属性分别做了限制。
我们把年龄做了number类型限制后,再传入字符串18,看有什么变化?
此时发现控制台,会报错,显示age的数据类型不匹配。
虽然不影响展示,但是会报错。这可以给我们提供一个明确的提示。方便我们规范的传入数据。
问题四:可以限制类型,那是不是也可以限制是否必传呢?
答:当然可以。
假设姓名必传,其他非必传。
类型属性:type:xx
必传属性:required:true
默认属性:default:xx
name必传,那么我们不传试试,年龄不传默认18
结果,控制台同样报错,提示,name是必传属性。年龄我们没传,也成功展示的是默认值,19是因为一开始对年龄进行了加1操作,这样我们就成功对属性进行了限制。
对以上总结:
props在接收数据的同时,对数据进行了类型限制+默认值的指定+必要性的限制
问题五:props接收的属性值可以修改吗?
答:不可以
我们添加一个button,以及点击事件
注意:我们要访问props里面的属性值,通过this.即可找到
查看结果,发现页面可以显示,但是控制台报错,因此它是不可修改的
问题六:必须要修改props属性值,怎么办?
答:通过data去间接修改
我们在data里面重新定义一个变量去接收props属性。这个变量最好不要重名,重名的话,优先获取props属性值,优先级props>data。然后我们在操作或者html绑定值的时候,都去操作data里面新定义的变量
此时可以看到,修改成功,也没有报错:
总结:配置项props
-------让组件接收外部传来的数据
接收数据三种方式:
(1)只接收:props: ['name','age','sex']
(2)接收并限制类型:props: { "name":Number }
(3)限制类型、限制必要性指定默认值:
props:{ "name":{ type:String, required:true }, "age":{ type:Number, default:18 }, "sex":{ type:String, default:'男' }, },
注意:props是只读的,vue底层会检测你对props的修改,如果进行了修改,控制台会报错,必须修改,就复制一份到data中,通过data去修改数据。
-
vue props中定义多属性对象
2021-10-19 18:32:52vue 在 props 中定义多属性对象,语法如下 例如定义 formValidate 对象,且 formValidate 中含有属性 city 和 name,默认 city 和 name 都是空 formValidate: { type: Object, default: ()=>{ return { ...vue 在 props 中定义多属性对象,语法如下
例如定义 formValidate 对象,且 formValidate 中含有属性 city 和 name,默认 city 和 name 都是空
formValidate: { type: Object, default: ()=>{ return { city: '', name: '' } } }
测试
下面以View UI (iview)中的组件 Form 表单作为子组件进行演示
子组件 Userinfo 代码
<template> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <FormItem label="Name" prop="name"> <Input v-model="formValidate.name" placeholder="Enter your name"></Input> </FormItem> <FormItem label="City" prop="city"> <Select v-model="formValidate.city" placeholder="Select your city"> <Option value="beijing">北京</Option> <Option value="nanjing">南京</Option> <Option value="shenyang">沈阳</Option> </Select> </FormItem> <FormItem> <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button> <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button> </FormItem> </Form> </template> <script> export default { props: { formValidate: { type: Object, default: ()=>{ return { city: '', name: '' } } } }, data () { return { ruleValidate: { name: [ { required: true, message: 'The name cannot be empty', trigger: 'blur' } ], city: [ { required: true, message: 'Please select the city', trigger: 'change' } ] } } }, methods: { handleSubmit (name) { this.$refs[name].validate((valid) => { if (valid) { this.$Message.success('Success!'); } else { this.$Message.error('Fail!'); } }) }, handleReset (name) { this.$refs[name].resetFields(); } } } </script>
父组件代码
<template> <div> <Userinfo :formValidate="formValidate"></Userinfo> </div> </template> <script> import Userinfo from '@/view/chil/Userinfo'; export default { components: { Userinfo }, data () { return { formValidate: { city: 'beijing', name: '薛宝钗' }, } }, methods: { } } </script>
运行效果
至此完
-
Vue中用props给data赋初始值遇到的问题解决
2020-10-17 17:12:01主要介绍了Vue中用props给data赋初始值遇到的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
vue中component组件的props使用详解
2020-08-29 13:01:56本篇文章主要介绍了vue中component组件的props使用详解,这里整理了详细的用法,具有一定的参考价值,有兴趣的可以了解一下 -
Vue props 属性原理
2019-09-13 14:34:06父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象。 例如: <!DOCTYPE html> <html lang="en"> <head> <me... -
vue项目中的props自定义属性
2022-01-13 20:15:581.这是一个自定义属性,在封装通用组件的时候,合理地使用props可以极大的提高组件的复用性 2.语法:可以定义为数组类型的: export default { props:['init'] } 也可以定义为对象类型: export default { ... -
vue3 watch监听props里的属性
2021-10-11 11:26:35import { watch } from "vue"; export default { props: { items: { type: Array, require: true } }, setup(props) { watch( () => props.items, (val) => { if (val.length > 4) { console.... -
vue 设置props属性默认类型
2022-03-04 17:59:27设置props属性默认类型 -
Vue 中如何将函数作为 props 传递给组件的实现代码
2020-11-20 14:19:27相反,Vue 有一个专门为解决这问题而设计的功能,接下来,我们来看看。 向组件传入函数 获取一个函数或方法并将其作为一个prop传递给子组件相对比较简单。实际上,它与传递任何其他变量方式完全相同 -
Vue2学习(3) vue组件以及props属性
2022-03-16 11:18:45Vue2学习(3) vue组件以及props属性 -
Vue ref属性、props属性、mixin属性
2022-03-30 13:14:24Vue ref属性、props属性、mixin属性 -
vue的ref属性、props属性和mixin属性
2022-04-26 15:38:43vue的ref属性和props -
Vue组件选项props实例详解
2020-08-29 16:10:31父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下 -
vue3 watch props 监听属性变化
2022-05-14 10:44:31我的需求是弹出一个模态框。...import { watch, toRefs } from "vue"; const props = defineProps({ visible: { type: Boolean, default: () => { return false; }, }, }); const visible = toRefs(props).vis -
vue props 属性值接受多个类型 _@jie
2021-05-12 10:35:16labelValue: { type: String | Number | Boolean, required: true, default: 0 } -
vue组件之属性Props
2020-12-24 12:52:41组件的属性和事件父子组件之间的通信父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息。比如,子组件需要某个数据,就在内部定义... -
vue props 属性值接受多个类型
2020-09-08 16:57:14vue props 属性值接受多个类型 直接上代码: someData: { type: Array | Object, default () { return [] } } ... 如果我们自己写不限制类型的props,可以使用数组的形式 props:['someData'] 但是有时我们做... -
Vue 子组件更新props中的属性值
2021-07-15 09:50:33父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync 父组件 <template> <div id="app"> // 注意点一、:show后跟修饰符.sync // 等同于<my-componen :show=... -
Vue-属性传值Props
2018-09-09 16:41:30vue传值有两种方法: 1、父组件向子组件传值(属性传值) 当数据都在App.vue中时,如下图 需要将App.vue中的值传给User.vue,则需要在两者的契合点上进行绑定,如下图, 在User.vue中需要进行注册(如下图)... -
【vue】对自定义属性--props的更深入理解
2022-03-28 17:53:29由于最近学习完vue在做项目,但是在跟做项目时,发现一个问题就是props自定义属性出现了可以读也可以写,并且数据流向成了双向的问题。 初始props 在刚刚学习的时候,对于props的了解是只能读不能写,并且同时它还是...