在写传值时候发现了props的对象和数组类型写法,不知道有什么差距就查了一下
props: ["testMsg",]
这种方式是使用数组的形式来定义props
,其中数组的元素是要传递的属性名称。在子组件中,可以通过this.$props
来访问这些属性
<template> <div>{{ testMsg }}</div>
</template> <script>
export default { name: 'ChildComponent', props: ['testMsg',]
}
</script>
props: {name:{type:String,default:''}}
这种方式是使用对象的形式来定义props
,其中对象的键是要传递的属性名称,对象的值是一个描述该属性规则的对象。可以通过这个规则对象来指定属性的类型和默认值
<template> <div>{{ name }}</div>
</template> <script>
export default { name: 'ChildComponent', props: { name: { type: String, // 指定属性类型为字符串 default: '' // 指定属性的默认值为空字符串 } }
}
</script>
父组件可以将name
的值传递给子组件,子组件可以通过this.$props.name
来获取这个值。如果父组件没有传递name
的值,那么子组件可以通过this.$props.name
来获取到默认值(空字符串)