src_props配置

文章发布较早，内容可能过时，阅读注意甄别。

# 代码

# `代码路径`

$ tree -N
.
├── App.vue
├── components
│   └── Student.vue
└── main.js

1
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

# `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

# `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

# 笔记

功能：让组件接收外部传过来的数据
传递数据：<Demo name="xxx"/>
接收数据：
1. 第一种方式（只接收）：props: ['name']
2. 第二种方式（限制类型）：props:{name: String}
3. 第三种方式（限制类型、限制必要性、指定默认值）： js props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 } }
  备注：props 是只读的，Vue 底层会监测你对 props 的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制 props 的内容到 data 中一份，然后去修改 data 中的数据。