在 vue 中使用 v-model 监听子组件中的任何值

背景：
最近在做博客的时候，我想把editor做成一个单独的组件，但是又想用 element-ui 的表单验证来限制editor的内容，于是想在组件上使用 v-model 就像使用 input 一样，于是去 vue 官方文档搜了下 v-model，有这么个东西

v-model.jpg

原理：
v-model 是个语法糖，实际就是在触发 input 事件时去更新 value 值，从文档看，可以在子组件用 model 来指定 v-model 要监听的事件，那么实现思路就是：在子组件 watch v-model 要监听的值，用 model 改变监听的 event 为 watch，在 watch 到值变化时 $emit 返回给父组件值，应该就可以实现 v-model 了

代码：
vue-cli 初始化一个空项目 app 为父组件，HelloWorld 为子组件
app 绑定数据并展示一下：

<template>
    <div id="app">
        <HelloWorld v-model="parentMsg" />

        <div style="margin-top:20px;">
            parentMsg is: {{ parentMsg }}
        </div>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'
    export default {
        name: 'app',
        components: {
            HelloWorld
        },
        data(){
            return{
                parentMsg: 100
            }
        }
    }
</script>

HelloWorld：

<template>
    <div class="hello">
        <h1>childMsg is: {{ childMsg }}</h1>

        <button @click="childMsg += 1">
            click to change childMsg
        </button>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        model: {
            prop: 'parentMsg',
            // v-model 监听 watch 事件
            event: 'watch'
        },
        props: {
            parentMsg: Number
        },
        data(){
            return{
                childMsg: 0
            }
        },
        watch: {
            // 监听数据变化 传送给父组件
            childMsg(newVal){
                this.$emit('watch', newVal)
            }
        },
        mounted() {
            // 初始化 childMsg
            this.childMsg = this.parentMsg
        }
    }
</script>

这样就实现了数据的实时获取：

v-model-res.jpg

写在最后：
感觉其实相当于给子组件传了一个事件，在子组件 watch 要绑定的值，值变化时把值传回父组件，在父组件更新视图，就是子组件给父组件传值的操作。

在 vue 中使用 v-model 监听子组件中的任何值

推荐阅读更多精彩内容