Vue官方文档对单向数据流有着如下定义

官网中说，在子组件中直接操作props会发出警告。实例如下

let btn =  Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        props:['msg'],
        template: '<button v-on:click="count++">{{msg}}你已经点了我{{ count }}次了.</button>'
    })
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        template:"<div><btn msg='某某同学'></btn></div>",
        components:{
            btn
        }
    })

在父组件中设置子组件的msg属性为’某某同学‘，然后在子组件中用props拿到值并渲染到页面，此时页面效果如下。

可以看到’某某同学‘被正常渲染。接下来我在子组件中的created生命周期中直接操作props看是否会报错。

        created(){
          this.msg='改变！'
        },

可以看到红色报错信息。在子组件上使用v-model双向绑定数据实际上也是单向数据流。v-model本质上就是v-on和v-bind的语法糖。

来看双向绑定的栗子

let v_input =  Vue.component('v_input', {
        data: function () {
            return {
                count: 0,
            }
        },
        props:['value'],
        template: ` <input :value="value" @input="$emit('input', $event.target.value)"
    >`
    })
    var app = new Vue({
        el: '#app',
        data: {
            com_input: '请输入'
        },
        template:"<div><v_input v-model='com_input'></v_input> <div>{{com_input}}</div> </div>",
        components:{
            v_input,
        },
    })

效果图如下

因为v-model是v-bind和v-on的语法糖，因此v-model也可以用v-bind和v-on来实现，所以下面这种写法也是可以的

 var app = new Vue({
        el: '#app',
        data: {
            com_input: '请输入'
        },
        template:"<div><v_input v-bind:value='com_input' v-on:input='com_input=$event'></v_input> <div>{{com_input}}</div> </div>",
        components:{
            v_input,
        },
    })

这两种写法得到的结果是一模一样的。v-model双向绑定和vue的单项数据流并不冲突