vue中子组件props接收数据时设置默认值

在Vue中，子组件通过props来接收父组件传递过来的数据。为了避免子组件在使用props时出现undefined的情况，我们可以在子组件中为props设置默认值。

有两种方式可以为props设置默认值：

1. 在子组件中使用props的默认值

Vue.component('child-component', {
  props: {
    name: {
      type: String,
      default: 'defaultName'
    }
  },
  template: '<div>{{ name }}</div>'
});

在props对象中，我们可以为每个属性设置默认值，这里我们为name属性设置了'defaultName'作为默认值。

2. 在子组件中使用计算属性

Vue.component('child-component', {
  props: {
    name: {
      type: String
    }
  },
  computed: {
    defaultName: function() {
      return this.name || 'defaultName';
    }
  },
  template: '<div>{{ defaultName }}</div>'
});

在计算属性中，我们可以根据props的值来返回默认值，这里我们使用了this.name || 'defaultName'，当name属性不存在或为空时，将返回'defaultName'作为默认值。