Vue简单案例——props的几种形式

约束传递：子组件如何处理父组件对象props的约束与计算

最新推荐文章于 2023-09-22 11:08:59 发布

原创最新推荐文章于 2023-09-22 11:08:59 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文探讨了在Vue中，如何在子组件接收父组件通过对象形式传递的props时，利用default、required和type属性进行数据约束。遇到类型错误时，虽然会报错但不影响数据传递。同时，讲解了如何对数值型props进行计算后再传递，以适应复杂需求。

props在接受父组件传递给子组件的数据的时候，除了可以是数组的形式也可以是以对象的形式，当以对象的形式接收数据的时候，表示除了接受数据本身也可以对数据进行一定的约束

父组件的内容：

<template>
  <div id="app">
    <div>
      <PropsDemo name="张三" :age="12" address="山西省"></PropsDemo>
    </div>
  </div>
</template>

<script>

import PropsDemo from "@/components/Props-Demo";

export default {
  name: 'App',
  components: {
    PropsDemo
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子组件的内容：

<template>
<div>
  <p>姓名：{{name}}</p>
  <p>年龄：{{age}}</p>
  <p>地址：{{address}}</p>
</div>
</template>

<script>
export default {
  name: "PropsDemo",
  props:{
    name:String,
    age:{
      type:Number,
      required:true
    },
    address:{
      type:String,
      default:'山东省',
    }
  }
}
</script>

<style scoped>

</style>

注意点：

当props的值是一个对象的时候，可以在接收数据的同时对数据进行简单的约束，其中常用的约束有，default：默认值，当不赋值的时候就显示默认值；required：知否为必须值，值为true表示这个值为必须值；type：表示对属性进行约束。如果传入的值不符合这些约束，就会在浏览器的控制台报错，比如这里我故意将年龄的值修改为String类型：

这个洋文报错的意思是，无效的 prop：属性“年龄”的类型检查失败。值为 12 的预期数字，得到值为“12”的字符串。但是这里仅仅是会在控制台进行报错提醒，并不会影响数据的传递，也就是说尽管控制台报错我依旧可以拿到我传递的数据，简单地说，当下次再次看到类似的报错信息就可以想到可能是传递的数据不符合我的约束导致的。

其次还有一个小注意点就是当我们在传递数据的时候，当属性值是一个数字的时候，在不加任何指令的情况下，传递过去的是一个字面值为数字的字符串，所以需要加一个v-bind指令来将引号内的值进行计算后再进行传递：