vue动态组件渲染的疑问

Question

1、vue component-is动态组件，props可根据每个组件配置传入，但是如果要给被渲染的组件添加v-model，比如 is='input' v-modal="value", 而这个input里面编辑的值可以和外界同步吗，会不会报出 子组件内不可修改父组件传递的prop值的错误？
2、用 v-if 替换component-is组件合适吗?

 <!-- //输入框 -->
        <finput v-if="info.component === 'input'" v-model="info.modal" :info="info" />
        <!-- //单选下拉-->
        <SingleSelect v-else-if="info.component === 'single-select'" v-model="info.modal" :info="info" />
        <!-- //单个日期选择-->
        <SingleDate v-else-if="info.component === 'single-date'" v-model="info.modal" :info="info" />
        <!-- //时间范围选择24小时-->
        <timeRange v-else-if="info.component === 'time-range'" v-model="info.modal" :info="info" />
        <!-- //数字输入-->
        <inputNumber v-else-if="info.component === 'input-number'" v-model="info.modal" :info="info" />
        <!-- //单选框-->
        <fradio v-else-if="info.component === 'fradio'" v-model="info.modal" :info="info" />
        <p v-else>未知组件</p>

4、可否用h.render方式呢 如何实现

Answer 1

1、vue组件化的初衷是为了把通用的功能抽离出来，减少代码之间的耦合，达到可复用的目的，这种写法无异于把变量定义在父组件，这样子组件也无法复用，还不如把表单等输入框直接写在父组件，还直观一些，你说对么
2、vue内置组件component--通过is属性动态渲染组件操作 和这种采用多个v-if的方式没有任何区别，只是官方已经封装好了，且更为简洁，开箱即用，建议使用官方封装好的api
3 、等到项目复杂，模块功能多的时候，你也会去修改别人代码时候，你就会体会到统一规范，对于维护代码有多方便啦
4、我举例一个场景，你这个一个组件的变量要在全局使用，你该如何解决呢，你这种思路很快就有瓶颈，我们会使用vuex来管理各种状态机制，
而不是存放在父组件里面

 <!-- //输入框 -->
        <finput v-if="info.component === 'input'" v-model="info.modal" :info="info" />
        <!-- //单选下拉-->
        <SingleSelect v-else-if="info.component === 'single-select'" v-model="info.modal" :info="info" />
        <!-- //单个日期选择-->
        <SingleDate v-else-if="info.component === 'single-date'" v-model="info.modal" :info="info" />
        <!-- //时间范围选择24小时-->
        <timeRange v-else-if="info.component === 'time-range'" v-model="info.modal" :info="info" />
        <!-- //数字输入-->
        <inputNumber v-else-if="info.component === 'input-number'" v-model="info.modal" :info="info" />
        <!-- //单选框-->
        <fradio v-else-if="info.component === 'fradio'" v-model="info.modal" :info="info" />
        <p v-else>未知组件</p>

这种写法可以实现效果，也没有错，但我们不推荐，因为后期你会去维护别人的项目，别人也会维护你的项目，
当这个组件需要被多个地方复用，组件的变量需要全局使用，这种写法就不适用了，还是建议以官方推荐方法来书写代码