Vue的props配置项详解

2022-04-09

简介主要介绍props配置项的概念，使用等。
props的作用是用来接收父组件中传过来的数据。
编写步骤有两个：

子组件使用props配置项进行属性的接收。
父组件使用子组件时以组件标签属性的形式进行数据的传递。

子组件使用props配置项进行属性的接收的形式有三种：
第一种：简单模式。
【Vue的props配置项详解】main.js：

//引入vue依赖import Vue from 'vue'//引入组件Appimport App from './App.vue'// 关闭生产提示Vue.config.productionTip = false//创建一个vue实例new Vue({//这个目前还没学过，先知道他的作用是将app放入容器中。render: h => h(App),//配置该vue实例管理id为app的容器}).$mount('#app')

App.vue：

Student.vue：

/* 编写样式的地方 */.orange{background-color: orange; }

效果：可以看到数据以正确显示。

文章图片

但是以上由一个文件，就是父组件进行数据的传递，是以普通属性的方式进行传递的，这样会导致传递的所有属性的值的类型都是字符串。
例子：
将年龄默认是传递过来加一。

文章图片

效果：

文章图片

所以不能使用普通的属性传递，需要借助v-bind指令进行绑定属性值，如果使用v-bind进行属性的绑定，会返回表达式返回的值，所以可以控制属性值的类型。

文章图片

效果：

文章图片

如果使用v-bind属性绑定的形式进行属性传递，还可以传递数组、对象类型的数据。

文章图片

文章图片

效果：

文章图片

第二种方式可以限制数据的类型：

文章图片

故意将年龄属性设置为字符串。

文章图片

效果：书名这种限制只是一个控制台的警告，实际不影响展示。

文章图片

第三种方式：可以限制类型，可以设置默认值，可以设置是否必须。

文章图片

传递时，第二个标签不传递年龄，来测试默认值，第一个标签不传递名字，以测试必须。

文章图片

效果：

文章图片

可以发现，里面的限制，仅仅会发出控制台警告，但是不影响使用。
props的熟悉是只读的，如果修改，会控制台警告，但是还是会修改成功的，只是会警告一下。

文章图片

文章图片

效果：

文章图片

如果实际业务需求需要更改props属性，那么可以复制一份props的内容到data，然后修改data中的数据。

文章图片

效果：

文章图片

总结本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

推荐阅读

上一篇：C++程序内存栈区与堆区模型案例分析

下一篇：Nacos注册中心的部署与用法示例详解