简介
主要介绍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：
<template>
<!-- 编写结构 -->
<div>
<!-- 父组件编写组件标签时，将数据以属性的方式进行传递。 -->
<student studentName="Yehaocong" studentAge="25"></student>
<student studentName="Liaoxiaoyan" studentAge="21"></student>
</div>
</template>
<script>
import student from "./components/Student.vue"
export default {
components:{
//注册组件
student
}
}
</script>
<style>
</style>
Student.vue：
<template>
<!-- 编写组件结构代码，也就是html代码 -->
<!-- 需要一个div括住，也就是只能有一个根元素，一般使用div -->
<div class="orange">
<div>学生姓名：{{studentName}}</div>
<div>年龄：{{studentAge}}</div>
</div>
</template>
<script>
//交互代码编写的地方，需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象，
//并且引入默认暴露的组件引入语法比较简单。
export default {
data() {
return {
}
},
//简便写法,用于接收父组件传递过来的数据
//数组形式，里面声明属性名称即可
props:["studentName","studentAge"],
}
</script>
<style>
/* 编写样式的地方 */
.orange{
background-color: orange;
}
</style>
效果：可以看到数据以正确显示。
但是以上由一个文件，就是父组件进行数据的传递，是以普通属性的方式进行传递的，这样会导致传递的所有属性的值的类型都是字符串。
例子：
将年龄默认是传递过来加一。
效果：
所以不能使用普通的属性传递，需要借助v-bind指令进行绑定属性值，如果使用v-bind进行属性的绑定，会返回表达式返回的值，所以可以控制属性值的类型。
效果：
如果使用v-bind属性绑定的形式进行属性传递，还可以传递数组、对象类型的数据。
效果：
第二种方式可以限制数据的类型：
故意将年龄属性设置为字符串。
效果：书名这种限制只是一个控制台的警告，实际不影响展示。
第三种方式：可以限制类型，可以设置默认值，可以设置是否必须。
传递时，第二个标签不传递年龄，来测试默认值，第一个标签不传递名字，以测试必须。
效果：
可以发现，里面的限制，仅仅会发出控制台警告，但是不影响使用。
props的熟悉是只读的，如果修改，会控制台警告，但是还是会修改成功的，只是会警告一下。
效果：
如果实际业务需求需要更改props属性，那么可以复制一份props的内容到data，然后修改data中的数据。
效果：
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注Devmax的更多内容!