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

最新推荐文章于 2024-05-19 20:04:25 发布

原创最新推荐文章于 2024-05-19 20:04:25 发布 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

本文介绍了JavaScript中在Vue组件开发中，props的两种常见写法：数组形式和对象形式，分别阐述了它们的定义、使用以及父组件如何向子组件传递属性。

在写传值时候发现了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来获取到默认值（空字符串）