Vue双向数据绑定

vue是单项数据流，子组件不能直接修改父组件传过来的值，那非输入元素如何时间实时更新

单model

用computed监控绑定的值，变化时传值给父级更新

//- parent
child-box(v-model="num")
//- childBox.vue
button(@click="add")

// childBox.vue
export default { 
    props: { num: Number },
    model: {
        prop: 'num',
        event: 'update'
    },
    computed: {
        currentNum： {
            get() {
                return this.num
            },
            set(currentNum) {
                this.$emit('update', currentNum)
            }
        }
    }
    methods: {
        add() {
            this.currentNum++
        }
    }
}

多model

用watch监控多个值并赋值，当赋值改变时再去更新父级

//- parent
child-box(:value.sync="value" :label.sync="label" :option= "list")
.result value: {{value}} --- label: {{label}}
//- childBox.vue
el-select(v-model="innerValue" @change="change")
    el-option(v-for="item of list" :key="item.value" :value="item.value" :label="item.label")

// childBox.vue
export default { 
    props: { 
        value: String,
        label: String,
        list: {
            type: Array,
            default: () => {
                return [
                    { value: '1', label: '111'},
                    { value: '2', label: '222'},
                    { value: '3', label: '333'},
                ]
            },
            
        }
    },
    data() {
        return {
            innerValue: '',
            innerLabel: '',
        }
    },
    watch: {
        value： {
            handle(val) {
                this.innerValue = val
            },
            immediate: true,
        },
    }
    methods: {
        change(val) {
            this.innerLabel = this.list.filter(item => {
                return item.value == val;
            })[0].label;
            this.$emit('update:label', this.innerLabel)
            this.$emit('update:value', val);
        }
    }
}

来自公司大佬的技术分享