Vue之父组件给子组件传多个不确定的参数

父组件给子组件传多个不确定的参数，可以使用v-bind进行传参。

父组件代码示例：

<template>
  <component ref="form" :value="value" :disabled="disabled" :is="currentComp" :mode="mode" v-bind="config" @input="valueChange"/>
</template>

子组件代码示例：

<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <a-date-picker size="middle" disabled :picker="type" :placeholder="placeholder" style="width: 100%;"></a-date-picker>
    </div>
    <div v-else>
      <a-date-picker :value="value" :disabled="disabled"  :format="format" size="middle" allowClear :picker="type"
        :popup-style="{'z-index':9999}" :show-time="format == 'YYYY-MM-DD HH:mm'? { format: 'HH:mm' }: false"
        :placeholder="placeholder" style="width: 100%;" @change="inputValue"></a-date-picker>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import useComponent from '../useComponent'

const props = defineProps({
  value: {
    default: null
  },
  disabled: {
    type: Boolean,
    default: false
  },
  format: {
    type: String,
    default: 'YYYY-MM-DD HH:mm'
  },
  placeholder: {
    type: String,
    default: '请选择日期时间'
  },
  mode: {
    type: String,
    default: 'DESIGN'
  },
  required: {
    type: Boolean,
    default: false
  },
})

const { _value } = useComponent(props)
const type = computed(() => {
  switch (props.format) {
    case 'YYYY': return 'year';
    case 'YYYY-MM': return 'month';
    case 'YYYY-MM-DD': return 'date';
    default: return 'date';
  }
})

const emit = defineEmits(['input'])
const inputValue = () =>{
  emit('input', props.value)
}
</script>

<style scoped>

</style>