详细聊聊vue中组件的props属性

2024-11-01 20:11:21

问题一：那props具体是怎么使用呢？原理又是什么呢？往下看
问题二：那如果我们想给年龄加1岁，怎么实现？
问题三：对于年龄这一类型，我们最希望拿到的是什么数据类型？
问题四：可以限制类型，那是不是也可以限制是否必传呢？
问题五：props接收的属性值可以修改吗？
问题六：必须要修改props属性值，怎么办？
总结：配置项props
总结

今天这篇文章，让你彻底学会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属性的文章就介绍到这了,更多相关vue组件的props属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue组件选项props实例详解

前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项使用Prop传递数据
详解vue父子组件间传值(props)

先定义一个子组件,在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { message: String //定义传值的类型<br> } } </script> <style> </style> 在父组件中,引入
vue的props实现子组件随父组件一起变化

本文实例为大家分享了vue的props实现父组件变化子组件一起变化,供大家参考,具体内容如下类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 绑定动态 Props 到父组件的数据.每当父组件的数据变化时,也会传导给子组件: <div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></c
Vue2实现组件props双向绑定

Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现. Vue2的组件props通信方式在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribu
vue中component组件的props使用详解

本文介绍了 vue中component组件的props使用详解,分享给大家,具体如下: props使用方法 Vue.component('my-component',{ props:['message'], template:'<div class="tem1">{{message}}</div>' }); <my-component message="hello"></my-component> 注意:props 的
详细聊聊vue中组件的props属性

目录问题一:那props具体是怎么使用呢?原理又是什么呢?往下看问题二:那如果我们想给年龄加1岁,怎么实现? 问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型? 问题四:可以限制类型,那是不是也可以限制是否必传呢? 问题五:props接收的属性值可以修改吗? 问题六:必须要修改props属性值,怎么办? 总结:配置项props 总结今天这篇文章,让你彻底学会props属性-- props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data.el.ref是一个级别的配
详细聊聊Vue中的options选项

目录 Vue中的options选项 options的五类属性入门属性使用vue文件添加组件 computed(计算属性) 用途缓存示例: watch(监听) 用途何为变化 deep: true是干什么的? computed和watch的区别 computed计算属性 watch 监听器总结 Vue中的options选项 options的五类属性数据: data,props,propsdata,computed,methods,watch DON: el,template,rende
Vue 子组件更新props中的属性值问题

目录 Vue子组件更新props的属性值 .sync属性 v-model应用 Vue子组件中修改Props的几种情况针对以上几种情况再逐一进行分析结果展示结论 Vue子组件更新props的属性值在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:.sync 和自定义v-model .sync属性父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync 父组件 <template> <div id="app&q
Vue中的 ref,props,mixin属性

目录 ref props $attrs mixin ref ref 属性: 1.被用来给元素或子组件注册引用信息((id的替代者) 2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识: <h1 ref="xxx">....</h1>或<School ref="xxx"></School> 获取: this.$refs.xxx 为了说明这个属性,我们重新写下相关
聊聊Vue中provide/inject的应用详解

众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数据管理的 Vuex. 在这么多的组件通信方式中,provide/inject 显得十分阿卡林(毫无存在感).但是,其实 provide/inject 也有它们的用武之地.今天,我们就来聊聊 Vue 中 provide/inject 的应用. 何为 provide/inject provide/inj
Vue中组件之间数据的传递的示例代码

Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: <div id="app"> <my-compo c="886"></my-compo> </div> 子组件中,用props声明这个值即可.并且在template里面可以直接使用{{c}}来获得这个属性,而不需要写为{{this
详解Vue中组件的缓存

之前在<Vue一个案例引发的动态组件与全局事件绑定总结>这篇文章中简单提到过组件的缓存.当时只是简单的提供了一个解决问题的思路,并没有说到多少组件缓存的东西,今天我们就来详细说说组件的缓存. 组件化开发模式下,我们会把整个项目拆分成很多组件,然后按照合理的方式组织起来. 自然就存在组件之间的切换问题,Vue 中有个「动态组件」的概念,它能够让我们更好的实现组件的切换. 在实际的项目开发中,产品是不可能放过我们的,需求总是在不停的变化,如果你碰到那些不改需求的产品就嫁了吧,太难得了. 最近项目中
vue中组件通信的八种方式（值得收藏！）

前言之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系. vue组件中关系说明: 如上图所示, A与B.A与C.B与D.C与E组件之间
详解vue中组件参数

我们来聊一下vue中的组件参数. 1.vue中组件参数我们可以为组件的 prop 指定验证要求,例如你知道的这些类型.如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你.这在开发一个会被别人用到的组件时尤其有帮助. 我们来看下最为简单和常见的vue代码 <div id="root"> <item content="hello"></item> </div> <script> Vue.compo
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父