vue props数组字符串设置默认值

在Vue.js中，当你需要向组件传递一个数组作为prop，并希望它有一个默认值时，可以在父组件的props对象中设置。例如，如果你的组件接受一个`options` prop，这是一个字符串数组，你可以这样做：

// 父组件
<template>
  <child-component :options="defaultOptions" />
</template>

<script>
export default {
  components: {
    ChildComponent: { /* ... */ },
  },
  data() {
    return {
      // 这里设置了默认选项数组
      defaultOptions: ['Option 1', 'Option 2', 'Option 3'],
    };
  },
};
</script>

在`ChildComponent`中，你可以像处理任何其他数组一样使用这个`options` prop：

<template>
  <ul>
    <li v-for="(option, index) in options" :key="index">{{ option }}</li>
  </ul>
</template>

<script>
export default {
  props: {
    // 指定options是一个字符串数组，并且允许空数组
    options: {
      type: Array,
      default: () => [],
      validator: (value) => {
        // 可选：验证函数，确保传入的是字符串数组
        if (!Array.isArray(value) || !value.every((item) => typeof item === 'string')) {
          console.error('Invalid options array');
          return false;
        }
        return true;
      },
    },
  },
};
</script>

这样，如果父组件没有提供`options` prop，`ChildComponent`将会使用默认的空数组。如果有提供，则会使用提供的值。