src_props配置
# 代码
# 代码路径
$ tree -N
.
├── App.vue
├── components
│ └── Student.vue
└── main.js
1
2
3
4
5
6
2
3
4
5
6
# App.vue
<template>
<div>
<Student name="张三" :age="18" sex="男" />
<Student name="李四" :age="20" sex="女" />
</div>
</template>
<script>
import Student from './components/Student.vue'
export default {
name:'App',
components:{Student},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# Student.vue
<template>
<div>
<h2>学生姓名：{{name}} </h2>
<h2>学生性别：{{sex}} </h2>
<h2>学生年龄：{{myAge+1}} </h2>
<button @click="addAge">点我给年龄+1</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
console.log(this);
return {
msg:'我是一个尚硅谷的学生',
myAge:this.age
}
},
methods: {
addAge(){
this.myAge++
}
},
// 简单声明接收
// props:['name','age','sex']
// 接收的同时对数据进行类型限制
// props:{
// name:String,
// age:Number,
// sex:String
// }
// 接受的同时对数据： 进行类型限制+默认值的指定+必要性的限制
props:{
name:{
type:String, // name的类型是字符串
required:true // name是必要的
},
age:{
type:Number,
default:99 // 默认值
},
sex:{
type:String,
required: true
}
}
}
</script>
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
# main.js
import Vue from "vue"
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el: '#app',
components:{App},
render: h => h(App)
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 笔记
- 功能：让组件接收外部传过来的数据
- 传递数据：
<Demo name="xxx"/> - 接收数据：
- 第一种方式（只接收）：
props: ['name'] - 第二种方式（限制类型）：
props:{name: String} - 第三种方式（限制类型、限制必要性、指定默认值）：
props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 } }1
2
3
4
5
6
7
- 第一种方式（只接收）：
备注：props 是只读的，Vue 底层会监测你对 props 的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制 props 的内容到 data 中一份，然后去修改 data 中的数据。
上次更新: 2024/02/28, 13:00:35
|