vue自定义组件component中使用v-model

项目中，使用el-tab组件，根据选项切换不同的组件，如下：

<el-tabs :before-leave="leaveTab" @tab-click="handleTabClick" 
        tab-position="left" style="height: 500px">
    <el-tab-pane v-for="(item) in tree" 
        :label="item.nodename" :key="item._id"></el-tab-pane>
    <div>
        <component v-bind:is="currentCom" v-model="comValue"></component>
    </div>
</el-tabs>

监听tab-click事件，来更改currentCom的值(即为当前的组件名)，而comVaule是要传递给组件的双向绑定的值。

这里说明一下，因为本项目中，不同tab切换的组件，会有重复值，所以不能直接使用el-tabs的v-mode，否则会出现相同选中状态的选项卡。

本来思路很简单，在handleTabClick方法里，更改currentCom和comValue的值即可，但实际项目中发现，如果前后currentCom是相同的，那么切换comValue是有效的，如果不同，comValue是无效的。

最后我实现的思路是，先更改currentCom值，然后做一个演示器，哪怕10毫秒，再更改comValue的值，即可实现了，代码如下：

// 因为nodename会有重复，所以必须自己实现方法
const handleTabClick = (tab) => {
    state.currentCom = state.tree.find(item => {
        if (item.nodename === tab.props.label) {
            return item
        }
    }).component
    state.currentID = state.tree.find(item => {
        if (item.nodename === tab.props.label) {
            return item
        }
    })._id
    setTimeout(() => {
        const section = state.sections.find(item => {
            return (item.node === state.currentID)
        })
        //console.log(section)
        if (section) {
            state.comValue = section.content
        } else {
            state.comValue = ''
        }
    }, 10)
}

当然，始终觉得这个方法有点笨拙，哪位大神有更好的方法，欢迎留言探讨，最终效果如下：