vue 2.x与1.x关于数据流向的区别

在1.x中，可以通过.sync实现数据的双向绑定。

在Vue 2.x中，为了组件的解耦，通过props传递给子组件的值是单向的。如果我们需要修改父组件传递的数据，我们可以将props的值赋值到data中，然后修改data中的值。

数据流向真的是单向的吗？

那么在Vue 2.x中数据的流向真的是单向的吗？我们看下下面的Demo

对象、数组类型数据流向

新建两个组件，父组件（parent.vue）及子组件（child.vue），两个组件内容都比较简单。

父组件里面展示子组件的内容，父组件通过toChild属性，将自己一个对象数据传递到子组件。

子组件接收到父组件传递的值后，存储到data中的toParentC中，然后修改toParentC的值。

父组件parent.vue

<template>
  <div>
    <p>
      这是父组件
    </p>
    <el-input v-model="toChild.name" placeholder="传递给子组件的值"></el-input>
    <child :toChild="toChild"></child>
  </div>
</template>
<script>
import child from './child'

export default {
  name: 'parent',
  components: {child},
  data () {
    return {
      toChild: {
        name: '张三'
      }
    }
  }
}
</script>

子组件child.vue

<template>
  <div>
    <p>这是子组件</p>
    <el-input v-model="this.toChild.name" placeholder="我是从子组件获取的值"/>
    <el-input v-model="toParent.name"></el-input>
    <el-button type="primary" @click="toParentC">返给父组件</el-button>
  </div>
</template>
<script>
export default {
  name: 'child',
  props: ['toChild'],
  data () {
    return {
      toParent: ''
    }
  },
  methods: {
    toParentC: function () {
    },
  },
  created () {
    this.toParent = this.toChild
  },
}
</script>

按照我们上面的说法，数据是单向流转的，那么我们在修改toParentC值时，父组件的值应该是不会改变的，那么到底会不会改变呢，我们运行工程验证一下。

纳尼，父组件的值还是改变了。why？