记录vue2组件传值props的两种写法

一路向前的月光2023-11-29 19:36

在写传值时候发现了props的对象和数组类型写法，不知道有什么差距就查了一下

props: ["testMsg",]

这种方式是使用数组的形式来定义props，其中数组的元素是要传递的属性名称。在子组件中，可以通过this.$props来访问这些属性

javascript 复制代码

<template>  
  <div>{{ testMsg }}</div>  
</template>  
  
<script>  
export default {  
  name: 'ChildComponent',  
  props: ['testMsg',]  
}  
</script>

props: {name:{type:String,default:''}}

这种方式是使用对象的形式来定义props，其中对象的键是要传递的属性名称，对象的值是一个描述该属性规则的对象。可以通过这个规则对象来指定属性的类型和默认值

javascript 复制代码

<template>  
  <div>{{ name }}</div>  
</template>  
  
<script>  
export default {  
  name: 'ChildComponent',  
  props: {  
    name: {  
      type: String, // 指定属性类型为字符串  
      default: '' // 指定属性的默认值为空字符串  
    }  
  }  
}  
</script>

父组件可以将name的值传递给子组件，子组件可以通过this.$props.name来获取这个值。如果父组件没有传递name的值，那么子组件可以通过this.$props.name来获取到默认值（空字符串）