Vue 父子组件双向绑定传值

最简单的双向绑定（单文件中）就是表单元素的v-model了，如果同时设置v-model和value，value属性无效。

自定义v-model：（不推荐）

child:


export default{
    model:{
        prop:'msg', // 指父组件设置 v-model 时，将变量值传给子组件的 msg
        event:'parent-event' // 指父组件监听 parent-event 事件
    },
    props:{
        msg:String // 此处必须定义和model的prop相同的props，因为v-model会传值给子组件
    },
    mounted(){
    // 这里模拟异步将msg传到父组件v-model，实现双向控制
        setTimeout(_=>{
            let some = '3秒后出现的某个值'; // 子组件自己的某个值
            this.$emit('parent-event', some);  //通过 emit 触发parent-event，将some传递给父组件的v-model绑定的变量
        }, 3000);
    }
}

parent:

自定义多个双向值(推荐)：.sync修饰符

child:

parent:

链接：https://juejin.im/post/5b5c2d986fb9a04f897840ac
来源：掘金