vue中props配置项

props是Vue组件之间通信的一种方式，通过props可以将数据由父组件传递给子组件
因为props是单项数据流，所以props只能从父组件传递给子组件

接收数据有三中方式

• 第一种（只接收）props:[‘msg’]
• 第二种（限制类型）props:{ name:Number},
• 第三种（限制类型，限制必要性，指定默认值）

下面我们直接来使用props配置项实现一个简单的例子

<!-- 父组件 -->
<template>
  <div id="app">
  	<!-- 这里msg前需要加: ,这样才可以传递数据 -->
    <Child :msg="name"></Child>
  </div>
</template>

<script>
import Child from './components/Child'

export default {
  name: 'App',
  data(){
    return {
      name:'张三',
    }
  },
  components: {
    Child
  }
}
</script>

第一种接收数据的方式

//子组件
<template>
   <div>他的名字：{{ msg }}</div>
</template>

<script>
export default {
    props:['msg'],
}
</script>

页面正常输出

第二种接收数据的方式
如果我们正常限制类型为字符串则不会出现问题，如果设置为其他类型的话（假设设置为Number类型），页面任会正常输出，但是会报错，如图所示下图，报错处大致意思为得到的是NaN，而期望类型为字符串类型

<template>
   <div>他的名字：{{ msg }}</div>
</template>

<script>
export default {
    props:{
      name:String,
    },
}
</script>

第三种接收数据的方式
required: 指定该属性是否是必需的。如果该属性没有默认值，并且父组件没有传递该属性，则会在控制台中打印警告
default: 指定该属性的默认值。如果父组件没有传递该属性，则使用默认值。如果 default 的值是对象或数组，必须将其设置为函数，并在函数中返回它，以避免值之间的共享。

<template>
   <div>他的名字：{{ msg }}</div>
</template>

<script>
export default {
    props:{
      msg:{
        type:String,
        required:false,
        default:'cess',
      }
    },
}
</script>