Vue props 配置项
功能:让组件接收外部传过来的数据
传递数据:<Demo name="xxx"/>
接收数据:
-
只接收:
props:['name']
-
限制类型:
props:{name:String}
-
限制类型+必要性+指定默认值:
props: { name: { type: String, // 限制类型 required: true // 是否必要的 default: '张三' // 默认值 },
实例
src 文件结构
|-- src
|-- App.vue
|-- main.js
|-- components
|-- Student.vue
App.vue
<template>
<div id="app">
<Student name="李四" sex="男" :age="18"/>
<Student name="王五" sex="男" :age="19"/>
</div>
</template>
<script>
import Student from "@/components/Student";
export default {
name: 'App',
components: {
Student
},
data() {
return {}
}
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Student.vue
<template>
<div class="school">
<h2>{{msg}}</h2>
<h2>姓名:{{name}}</h2>
<h2>性别:{{sex}}</h2>
<h2>年龄:{{age+1}}</h2>
<hr>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {
msg: '你好',
}
},
// 简单声明接受
// props: ['name', 'sex', 'age']
// 接受的同时对数据进行:类型限制
// props: {
// name: String,
// sex: String,
// age: Number
// }
// 接受的同时对数据进行:类型 + 默认值 + 必要性的限制
props: {
name: {
type: String,
required: true // 是否必要的
},
sex: {
type: String,
required: true
},
age: {
type: Number,
default: 99 // 默认值
}
}
}
</script>
不建议直接修改props
备注:props 是只读的,Vue底层会监测对props的修改,如果进行修改,就会发出警告。若业务需求确实需要修改,可以复制 props 的内容到 data 中一份,然后修改 data 的数据