动态绑定组件时 v-model:value 的使用

// require import components
const files = require.context("@/components/control", true, /\index.vue$/);
// console.log('files:', files.keys())
//files: ['./cascader/index.vue', './control/cascader/index.vue', './control/checkbox/index.vue',]
const modules = {};
files.keys().forEach(key => {
    const name = key.split("/");
    // console.log('name:', name)
    // name: (3) ['.', 'cascader', 'index.vue']
    // name: (4) ['.', 'control', 'cascader', 'index.vue']
    // console.log('files(key).default:', files(key).default)
    // console.log('files(key):', files(key))
    // files(key): Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): 'Module'}
    modules[name[1] + "Component"] = files(key).default || files(key);
});

export default {
    name: "BasisForm",
    // components: {
    //     cascaderComponent,
    //     uploadComponent,
    //     wangeditorComponent,
    //     inputComponent,
    //     dateComponent,
    //     selectComponent,
    //     radioComponent,
    //     checkboxComponent,
    //     textareaComponent,
    // },
    components: modules,
    setup(props, {emit}) {
        <template v-for="item in form_item" :key="item.prop">
            <el-col v-if="!form_hidden[item.prop]" :span="item.col || 24">
                <el-form-item v-if="item.type !== 'slot'" :label="item.label" :prop="item.prop" :rules="item.rules">
                    <component
                        v-model:value="field[item.prop]"
                        :is="item.type + 'Component'"
                        :data="item"
                        :disabled="disabled[item.prop]"
                        @callback="componentCallback"/>
                </el-form-item>
                <el-form-item v-else :label="item.label" :prop="item.prop" :rules="item.rules">
                    <slot :name="item.slot_name"></slot>
                </el-form-item>
             </el-col>
        </template>
    }
}

这段代码是在 Vue.js 中使用的，它使用了 Vue 的动态组件和双向数据绑定。

<component> 是 Vue 的内置组件，用于动态地绑定一个组件。它的 is 属性决定了要渲染哪个组件。在这个例子中，is 属性的值是 item.type + 'Component'，这意味着它会根据 item.type 的值动态地渲染不同的组件。

v-model:value="field[item.prop]" 是 Vue 的双向数据绑定语法。v-model 指令在内部为不同的输入元素使用不同的 property 并抛出不同的事件，但是 v-model 不会在 component 上生效，因为多数组件不会像原生的输入元素那样使用 value 作为其 prop 名或 input 作为其事件名。这就是为什么在这里使用 v-model:value 的原因。

field[item.prop] 是一个动态的属性名，它的值会被绑定到当前渲染的组件的 value prop 上。当组件触发 update:modelValue 事件并传递新的值时，field[item.prop] 的值会被更新。

总的来说，这段代码的意思是：动态地渲染一个组件，并将 field[item.prop] 的值绑定到这个组件的 value prop 上，当组件的 value prop 的值改变时，field[item.prop] 的值也会相应地改变。