Vue中的props是用于父组件向子组件传递数据的一种方式。在Vue中，我们可以给props设置默认值，以确保在父组件没有传递相应的props时，子组件能够正常运行。

要给props设置默认值，可以在子组件中使用props选项，并为每个props指定一个默认值。例如，我们有一个子组件HelloWorld，其中有一个props属性message，我们可以给它设置一个默认值：

```javascript

props: {

message: {

type: String,

default: 'Hello World'

}

```

在上面的代码中，我们为message属性设置了一个默认值'Hello World'。这意味着如果父组件没有传递message属性给HelloWorld组件，那么HelloWorld组件将使用默认值'Hello World'。

除了直接设置默认值，我们还可以使用函数来动态地设置默认值。例如，我们可以使用一个函数来返回一个动态的默认值：

```javascript

props: {

message: {

type: String,

default: function () {

return 'Hello World'

}

}

```

在上面的代码中，我们使用一个函数来返回默认值'Hello World'。这样，每次使用HelloWorld组件时，都会调用该函数来获取默认值。

如果我们希望props的默认值是一个对象或数组，我们需要将其设置为一个函数，并在函数中返回一个新的对象或数组。这是因为对象和数组是引用类型，如果我们直接将其设置为默认值，会导致所有实例共享同一个对象或数组。

```javascript

props: {

items: {

type: Array,

default: function () {

return []

}

}

```

在上面的代码中，我们将items属性的默认值设置为一个空数组。这样，每个HelloWorld组件实例都会有自己独立的数组。

总结一下，要在Vue中设置props的默认值，可以在子组件中使用props选项，并为每个props指定一个默认值。可以直接设置默认值，也可以使用函数来动态地设置默认值。如果默认值是一个对象或数组，需要将其设置为一个函数，并在函数中返回一个新的对象或数组。这样，即使父组件没有传递相应的props，子组件也能够正常运行。

上一篇

vue3keepalive怎么操作

下一篇

vue事件冒泡怎么操作