需求

一个展示学生信息的组件
Student.vue:

<template>
    
    <div class="demo">
        <h2>名字:{{name}}h2>
        <h2>年龄:{{ age }}h2>
    div>
template>
<script>
// 组件交互的代码（数据、方法），相当于非单文件中的出了template的配置
export default {
    name:'StudentVue',
    data() {
        return {
            name: "yang",
            age: 18,
        };
    },
}

script>
<style>

/* 组建的样式 */
.demo{
    background: green;
}
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

APP.VUE:

<template>
  <div>
    <Student/>
  div>
template>
<script>
//引入组件
import Student from './components/Student'
export default {
  name: 'App',
  components: {
    Student
  },
  data() {
    return {
      msg:"欢迎！！！"
    }
  },

}
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

输出：

需求：学生页面的数据是动态传入的，而不是写死的——引入props配置

props配置

App.vue传入数据的时候通标签的属性传入，
Student.vue中通过 props配置进行引入。

props配置简单接收——数组形式

props: ['属性名','属性名']

app.vue;

<template>
  <div>
    <Student name='张三' age="20"/>
  div>
template>
<script>
//引入组件
import Student from './components/Student'
export default {
  name: 'App',
  components: {
    Student
  },
  data() {
    return {
      msg:"欢迎！！！"
    }
  },

}
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

student.vue

<template>
    
    <div class="demo">
        <h2>名字:{{name}}h2>
        <h2>年龄:{{ age }}h2>
    div>
template>
<script>
// 组件交互的代码（数据、方法），相当于非单文件中的出了template的配置
export default {
    name:'StudentVue',
    props: ['name','age']
}

script>
<style>

/* 组建的样式 */
.demo{
    background: green;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

props配置接收——对象形式

可以对接收参数的数据格式进行限制：

    props: {
        name: String,
        age:Number
    }
1
2
3
4

props配置接收——对象形式2

可以对接收参数的数据格式进行限制，同时可以限制属性是否是必需的，也可以设置默认值

    props: {
        name: {
            type: String,
            required:true,
        },
        age: {
            type: Number,
            default:99
        },
       
    }
1
2
3
4
5
6
7
8
9
10
11

props配置分析

• 通过props配置接受的属性最终配置在组建的实例对象上（vc）
• 传入数据的时候通标签的属性传入,即属性="值"，所以默认情况下传过去的属性值都是字符串，如果想要传过去number值，可以靠v-bind实现
  
  :age="20"会将 "20"解析成js表达式，表达式的结果就是number类型的20，所以传过去的值就是number类型的18.
• propos可以对传入的属性值的类型进行限制
• propos传过来的属性不能修改
  props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

若要修改props传过来的属性，需要这样写：

<template>
    
    <div class="demo">
        <h2>名字:{{name}}h2>
        <h2>年龄:{{ myAge }}h2>
        <button @click="addAge">点击年龄修改button>
    div>
template>
<script>


// 组件交互的代码（数据、方法），相当于非单文件中的出了template的配置
export default {
    name:'StudentVue',
    data() {
        console.log(this)
        return {
            myAge:this.age
        }
    },
    props: {
        name: {
            type: String,
            required:true,
        },
        age: {
            type: Number,
            default:99
        },
       
    },
    methods: {
        addAge() {
            this.myAge++
        }
    }
}

script>
<style>

/* 组建的样式 */
.demo{
    background: green;
}
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

props的优先级

props的优先级比较高，高于data(){}配置