浅谈vue-props的default写不写有什么区别

让我来详细讲解一下"浅谈vue-props的default写不写有什么区别"。

什么是vue-props？

在Vue.js框架中，组件是一个可复用、可包含任意代码的模块。每个组件往往都有自己的属性或状态，这些属性或状态需要传递给子组件或父组件，这就是props的作用。

Vue中的props属性类似于React.js组件中的props属性，用于接收外部传递的数据。props是一个数组，包含了组件要接收的外部数据属性，每个属性都可以包括类型、默认值和验证规则等。

为什么要给props设置默认值？

当一个数据属性在组件中被定义为props时，父级组件不能通过数据双向绑定去改变这个props属性，父级组件所能够做的是改变这个props属性的值。

如果不设置默认值，当父组件没有传递对应的props属性时，这个属性的值将会是undefined，而在使用这个属性值时将会导致JavaScript错误。为了防止这种情况的发生，我们需要在组件中为每一个props属性设置默认值。

default写不写的区别

默认情况下props属性没有设置默认值，但是Vue.js提供了"default"来为props属性设置默认值。

在组件编写时，我们可以选择是否在props属性中设置默认值。这里有两种情况可以讨论：

1.不设置默认值

当我们不为props属性设置默认值时，就必须保证在父级传递这个属性值给子级时，这个属性值是不会为空的。否则，在子组件中使用这个属性值时，将会因为获取到的值为空而导致错误。

示例代码如下：

// 子组件
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

// 父组件
<template>
  <div id="app">
    <child-component :message="parentMsg"></child-component>
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMsg: ''
    }
  },
  mounted() {
    // 父级未传递对应属性
  }
}
</script>

在上面的示例代码中，当父级未传递message属性时，子组件中的message属性值将会是undefined，而在使用这个属性值时将会导致JavaScript错误。

2.设置默认值

为了防止父级没有传递此属性或传递了一个空值产生错误，我们就可以为props属性设置默认值。如果设置了默认值，当父级未传递这个属性时默认值就会生效。

示例代码如下：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Hello World'
    }
  }
}
</script>

在上述示例代码中，我们为message属性设置了默认值为"Hello World"。所以，当我们在父组件中不传递"message"值时，在子组件中的message属性值就会自动变为"Hello World"。