vue数据流是单向吗-百家乐凯发k8

是单向的。虽然vue有双向绑定“v-model”，但是vue父子组件之间数据传递，仍然还是遵循单向数据流的，父组件可以向子组件传递props，但是子组件不能修改父组件传递来的props，子组件只能通过事件通知父组件进行数据更改。

本教程操作环境：windows7系统、vue3版，dell g3电脑。

vue是单向数据流，数据流向是从上到下，从父组件传递到子组件的。

不要和vue的双向数据绑定搞混了；双向数据绑定说的是视图和模板之间的渲染关系，并不是数据的流向关系!

vue父子组件之间数据传递是遵循单向数据流的，父组件可以向子组件传递props，但是子组件不能修改父组件传递来的props，子组件只能通过事件通知父组件进行数据更改。

1，单向数据流：

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，也将会改变父组件的状态。

2，prop是通过引用传入的：

注意在 javascript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

深入理解 vue 单向数据流

1、v-model 用在 input 元素上

v-model在使用的时候很像双向绑定的（实际上也是。。。），但是 vue 是单项数据流，v-model 只是语法糖而已：

第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样：

要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 html5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，通过 $event 把最新的 value 传递给 something。

我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论： 在给 input 元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 'input' 事件作为实时传递 value 的触发事件

2、v-model 用在组件上

v-model 不仅仅能在 input 上用，在组件上也能使用，拿凯发网娱乐官网下载官网上的demo看。

vue.component('currency-input', {
  template: '\
    \
      $\
      \
    \
  ',
  props: ['value'], // 为什么这里要用 value 属性，value在哪里定义的？
  methods: {
    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updatevalue: function (value) {
      var formattedvalue = value
        // 删除两侧的空格符
        .trim()
        // 保留 2 位小数
        .slice(
          0,
          value.indexof('.') === -1
            ? value.length
            : value.indexof('.')   3
        )
      // 如果值尚不合规，则手动覆盖为合规的值
      if (formattedvalue !== value) {
        this.$refs.input.value = formattedvalue
      }
      // 通过 input 事件带出数值
      // 
      this.$emit('input', number(formattedvalue))
    }
  }
})

如果你知道这两个问题的答案，那么恭喜你真正掌握了 v-model，如果你没明白，那么可以看下这段代码：

所以在组件中使用时，它相当于下面的简写：
//上行代码是下行的语法糖

所以，给组件添加 v-model 属性时，默认会把 value 作为组件的属性，然后把 'input' 值作为给组件绑定事件时的事件名。这在写组件时特别有用。

3、v-model 的缺点和解决办法

在创建类似复选框或者单选框的常见组件时，v-model就不好用了。

v-model 给我们提供好了 value 属性和 oninput 事件，但是，我们需要的不是 value 属性，而是 checked 属性，并且当你点击这个单选框的时候不会触发 oninput 事件，它只会触发 onchange 事件。

因为 v-model 只是用到了 input 元素上，所以这种情况好解决：

当 v-model 用到组件上时：

vue.component('checkbox', {
  tempalte: ''
  props: ['value'],
  data: function () {
        return {
            //这里为什么要定义一个局部变量，并用 prop 的值初始化它。
            currentvalue: this.value
        };
    },
  methods: {
    change: function ($event) {
      this.currentvalue = $event.target.checked;
      this.$emit('input', this.currentvalue);  
    }
})
在 vue 2.2 版本，你可以在定义组件时通过 model 选项的方式来定制 prop/event 。
4、vue 组件数据流
从上面 v-model 的分析我们可以这么理解，双向数据绑定就是在单向绑定的基础上给可输入元素（input、textare等）添加了 change(input) 事件，来动态修改 model 和 view ，即通过触发（$emit）父组件的事件来修改mv来达到 mvvm 的效果。而 vue 组件间传递数据是单向的，即数据总是由父组件传递到子组件，子组件在其内部可以有自己维护的数据，但它无权修改父组件传递给它的数据，当开发者尝试这样做的时候，vue 将会报错。这样做是为了组件间更好的解耦，在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以
    vue 不推荐子组件修改父组件的数据，直接修改 props 会抛出警告。流程图如下：
所以，当你想要在子组件去修改 props 时，把这个子组件当成父组件那样用，所以就有了
1、定义一个局部变量，并用 prop 的值初始化它。
2、定义一个计算属性，处理 prop 的值并返回。
【相关推荐：vuejs视频教程、web前端开发】
以上就是vue数据流是单向吗的详细内容，更多请关注其它相关文章！