Vue中通过render添加的元素实现伪双向绑定功能

共计 688 个字符，预计需要花费 2 分钟才能阅读完成。

前言

在 Vue 中通过 render 方式添加的组件的数据是无法和父类的数据实现双向绑定的，但是业务需求必须要实现这样的效果，所以这个时候我们只有通过设置事件等方式来实现类似于这样的效果。

正文

在 iView 中，例如有如下的表格：

<Table :columns="columns" :data="data" :border="true"></Table>

其数据如下：

export default {data(){
            return {columns:[],
                data:[{number:11111,verName:'加工精度',verValue:'',verConclusion:''}]
            }
        }
}

在表格中有一列合格选择项，需要下拉列表，故 columns 中的一列为：

{
    title: '检验结论',
    key:'verConclusion',
    render: (h, params) => {
        return h('Select',{
            props:{value:vm.data[params.index].verConclusion
            }
        },[
            h('Option', {
                props: {value: 'qualified',}
            }, '合格'),
            h('Option', {
                props: {value: 'unqualified',}
            }, '不合格')
        ]);
    }
}

然后我们要实现当选项被选中时 data 中的对应的数据的值也要同步变化，所以在此组件中加入如下事件：

'on-change':(value) => {vm.data[params.index].verConclusion = value;
 }

这时，只要这个下拉列表中的值发生改变时，data 中的对应数据也会进行变化。