Vue中的 props 属性

1.什么是 props 

         props 用于组件的传值，他的工作就是为了接受外面传过来的数据，是一个配置项，与data、el、ref 是一个级别的。

2.props 的使用

        --1 先准备子组件 Text1.vue ，一个父组件 app.vue ，在 App.vue 中导入两个子组件

        --2 在 App.vue 中 导入 text1.vue 组件

         --3 在父组件中子组件标签里传数据给子组件

<template>
  <div>
    <text1 name= "张胜男" brith="2002" age="20"></text1>
  </div>
</template>

        --4  在子组件定义 props 对象，里面包含三个数据，在 template标签 中 div标签 里面使用此数据

 3.props 属性

        --1 props 数据有类型之分

                

我们先来看一下输出的结果，生日和年龄看似是数字类型，实际上是字符串类型，通过 Vue 调试工具可以看到是字符串类型。

 

---

在这种情况下：实现生日 +1 的功能，会怎样呢，会不会报错？

<template>
  <div>
    <text1 name= "张胜男" brith="2002 + 1" age="20"></text1>
  </div>
</template>

---

可以看到并没有报错，但生日这项并没有像我们预期的一样是 2003，所有应该怎样操作？

--- 我们可以 在 brith 前面加一个 ' ：' 符号冒号，再看看结果：

<template>
  <div>
    <text1 name= "张胜男" :brith="2002 + 1" age="20"></text1>
  </div>
</template>

  

可以看见现在结果是我们想要的 2003。

同理我们把年龄前面加上冒号，为了确保正确在Vue控制台也可看见结果如下：

---

为了防止操作失误传错数据（虽然不影响显示，但是影响字符串拼接、数字计算）

我们就需要限制一下数据的类型。代码演示：

props: {
        "name": String,
        "brith": Number,
        "age": Number
    },

        --2 props 数据不可更改

如何实现年龄更改呢？

<button @click="changeAge">修改年龄</button>


methods: {
        changeAge() {
            this.age = 88
        }
    },

---

--- 可以看见，年龄虽然可以修改，但是有个警告！

--- 解决方案：我们需要使用一个中间值 temp 接收传来的 props 数据，然后对 temp 更改即可。

  data() {
        return {
            temp: this.age
        }
    },

    methods: {
        changeAge() {
            this.temp = 88
        }
    },

 注意：原来的年龄插值是 {{ age }}，但是使用此方法， 年龄插值就需要改变为 {{ temp }} 

         -- props 设置必传数据（数值不可为空），和属性默认值

用对象的方法定义单个数据：

props: {
        'name': {
            type: String,
            default: '刘德华'，
            required: true
        },
        'brith': {
            type: Number
        },
        'age': {
            type: Number
        }
    },

如果在 App.vue 中不传数据，那结果会怎样？

解析：我们设置了 default: ' 刘德华 '，那么属性 name 就会取 ' 刘德华 '。

如果我们去掉 default 那一项，留下 required: true， 结果会怎样？

结果是会有警告：