Vue的props配置项详解

简介

主要介绍props配置项的概念，使用等。

props的作用是用来接收父组件中传过来的数据。

编写步骤有两个：

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

子组件使用props配置项进行属性的接收的形式有三种：

第一种：简单模式。

main.js：

//引入vue依赖 import Vue from 'vue' //引入组件App import 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：

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

但是以上由一个文件，就是父组件进行数据的传递，是以普通属性的方式进行传递的，这样会导致传递的所有属性的值的类型都是字符串。

例子：

将年龄默认是传递过来加一。

效果：

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

效果：

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

效果：

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

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

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

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

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

效果：

可以发现，里面的限制，仅仅会发出控制台警告，但是不影响使用。

props的熟悉是只读的，如果修改，会控制台警告，但是还是会修改成功的，只是会警告一下。

效果：

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

效果：

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注0133技术站的更多内容!