Vue(Vue2+Vue3)——33.props配置

简介: Vue(Vue2+Vue3)——33.props配置

33 props配置


像el,data,watch,methods...都是vue的配置项,props也是一个配置项

props主要用来实现组件复用,并且动态绑定数据,它有3种使用方式,下面一一说明

通过案例进行分析使用props配置学习如何使用以及作用


33.1 编写案例


这里简单写了一个student组件,内容如下,这时候如果别人想用这个student组件,但是想要的数据不是这样的,比如学生姓名叫李四,这时候就需要修改组件模板了

首先,因为msg可以复用,所以不需要改,不确定的数据不能直接在组件的data中定义,而是要定义在props里面


33.2 props使用方式1(简单接收)


这种方式是最简单的,直接使用,收到什么参数就使用什么参数,不进行出来

在使用props配置的时候,可以定义成一个数组,把属性定义在里面,顺序可打乱,但是名称一定要对

使用组件的时候,可以动态指定数据,key一定要对得上!

通过开发者工具可以看到,三个props里面的属性


33.3 一个坑


如果有这么一个需求,学生年龄传入的是18,但是实际年龄需要+1,这时候要怎么写呢?

如果只是简单的在显示age的地方直接+1

可以看到,并没有执行,而是直接拼接了

这时候可以在组件传入age参数的时候,给age加一个:,也就是v-bind的缩写,表示以表达式的方式处理

再次查看,解决问题

虽然使用v-bind(:)可以解决类似问题,但是某一天别人使用模板的时候没有或者忘了写: ,那么将会导致页面数据展示有误,有什么办法可以避免这个问题呢?

最好的办法就是接收属性的时候,不要什么都收,只把符合条件的收了或者告诉使用者,传入的参数不对,那么我们想要限制,可以这么写


33.4 props使用方式2(对象接收)


这种方式稍微复杂一些:会对接收的参数进行判断(对数据格式进行限制),如果不符合要求会在控制台报错

props对象接收:把props写成对象的格式,里面是一组组的key value ,key就是属性value就是对应的数据类型

如图,我直接传入age参数,系统判断不合法,直接报错,说参数类型不合法

当然,如果加上:即可解决了


33.5 props使用方式3(对象接收升级版)


这种写法是最复杂的,也是最完整的,把props写成对象,每一个属性也写成对象,里面一共有三个属性:type(指定参数类型),default(指定默认值),required(指定是否必须传入,true:是)

props:{
            name:{
              type:String, //name的类型是String
              required:true //name必须传入
            },
            age:{
               type:Number, //age的类型是Number
               default:99  //age不是必须传入,如果不传默认99
            },
            sex:{
               type:String, //sex的类型是String
               required:true //sex不是必须传入
            }
        }

接下来就是各种测试了,首先这里组件没有传name

控制台马上报错:丢失一个必要的属性name

如果是age类型不对,也是一样的

如果不传age,默认值99也到位了并且会自动加入:(v-bind)


33.6 注意事项


事项1 不要定义无用的属性


不能随便给props里面定义无用的属性,如图,我定义了一个address属性,但是传入参数没有传,就会报错

会提示存在的属性是undefined

组件实例对象中这个不存在的属性也是undefined


事项2 props属性的优先级大于data


如果是多个属性key相同,那么props属性的优先级大于data的,并且会在控制台报错key已经存在

虽然报错了,但是会以组件实例传入的key为主,就说明了props属性的优先级大于data


事项3  尽量不要直接修改props里面的属性的值


有些需求,需要我们把收到props里面的值进行修改,如下所示

虽然可以使得年龄自增,但是也会报错,vue不建议直接修改props里面的值

但是如果非要实现这种业务,我们可以这么做,在data里面再定义一个变量接收props里面的属性,然后修改这个属性的值并且展示在页面上


这样就可以实现了,控制台也不会有警告


事项4 props不能传入vue关键字


如果我要传入key,或者ref这种关键字,是不行的,这些属于vue的关键字

标识key已经被占用的


33.7 总结


功能:让组件接收外部传过来的数据

  • (1)传递数据
  •  <Demo name="xxx"/>
  •    (2)接收数据
  •  第一种方式(只接收):
  •    props:['name']
  •     第二种方式(限制类型):
  •    props:{
  •      name:String
  •    }
  •    第三种方式(限制类型,限制必要性,指定默认值):
  •    props:{
  •      name:{
  •        type:String //类型
  •        required:true //必要性
  •        default:'张三'  //默认值
  •      }
  •      }

备注:props是只读的,Vue底层会监视对props的修改,如果进行了修改,就会发出警告

相关文章
|
8天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
104 4
|
12天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
27 3
|
20天前
|
JavaScript 前端开发
Vue 2 和 Vue 3 之间响应式区别
10月更文挑战第7天
30 2
|
17天前
|
JavaScript 前端开发 Java
vue2知识点:Vue封装的过度与动画
vue2知识点:Vue封装的过度与动画
14 0
|
10天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
2天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
2天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
10天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
28 9
|
9天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
8天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
13 2