vue2 props 类型 function

转载

落笔成诗 2024-10-31 19:46:47

文章标签 vue.js javascript 前端数据字符串 文章分类 运维

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类型：

vue2 props 类型 function_字符串

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

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

vue2 props 类型 function_字符串_02