怎样理解单项数据流

1.Vue的单项数据流:指数据一般从父组件传到子组件,子组件没有权利直接修改

父组件传来的数据,即子组件从props中直接获取的数据,只能请求父组件修改数据

再传给子组件。父组件属性值的更新会下行流动到子组件中。

2.为什么不能子组件直接修改父组传来的值呢？父组件的值可能会不断发生变化，那么

如果我们子组件对父组件传来的值比如props有一个number，子组件收到了number=1，

在收到后，子组件直接改变number的值为5，去做些事情，但还未做时父组件数据更新了，

传过来一个值3，也就是说子组件刚将其变为5,父组件又把它变成了3,可能影响子组件的使用。

说的官方一些，就是父组件的值更新时，子组件中props的值也会发生更新。

3.在组件中直接用v-model绑定父组件传过来的数据是不合理的，如果希望修改父组件传给子组件的值：

(1)在子组件data中创建一个变量获取props中的值，在取改变这个data中的值

(2)子组件使用$emit发出一个事件,让父组件去修改这个值。

一.如果是简单数据类型

传过去的值相当于拷贝的一份副本,修改子组件的内容并不会影响到父组件，但是直接修改会发生

警告,上述已经参阐述过了，同样通过代码来进行验证。

APP.Vue

<template>
  <div class="">
    <h1>我是父组件的{{ number }}</h1>
    <layout :data="number"> </layout>
  </div>
</template>

<script>
import layout from './views/layout.vue'
export default {
  data () {
    return {
      number: 1
    }
  },
  components: {
    layout
  },
  name: '',
  methods: {}
}
</script>

<style scoped></style>

子组件

<template>
  <div>
    <div class=""></div>
    <h1>我是子组件的{{ data }}</h1>
    <button @click="fn">点击修改</button>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    data: {
      required: true, // 必填
      default: 10 // 默认的值是10
    }
  },
  name: '',
  methods: {
    fn () {
      this.data = 100
    }
  }
}
</script>

<style scoped></style>

view:

 点击子组件修改并没有修改父组件的数据，相当于一个深拷贝，但是任然会有弊端：

 vue不建议这种写法。

为什么会出现警告呢？

假设子组件需要的值是父组件传递的5

子组件还没做任何操作时

父组件将5更新成了3

可能影响到子组件的使用

说的官方一些，就是父组件的值更新时，子组件中props的值也会发生更新。

正确的修改方式：

<template>
  <div>
    <div class=""></div>
    <h1>我是子组件的{{ newdata }}</h1>
    <button @click="fn">点击修改</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      newdata: this.data
    }
  },
  props: {
    data: {
      required: true, // 必填
      default: 10 // 默认的值是10
    }
  },
  name: '',
  methods: {
    fn () {
      this.newdata = 100
    }
  }
}
</script>

<style scoped></style>

二..如果是引用数据类型

说明:引用的数据类型传过去的是一个地址

父组件：

<template>
  <div class="">
    <h1>我是父组件的{{ arr }}</h1>
    <layout :data="arr"> </layout>
  </div>
</template>

<script>
import layout from './views/layout.vue'
export default {
  data () {
    return {
      arr: ['苹果', '橘子', '香蕉']
    }
  },
  components: {
    layout
  },
  name: '',
  methods: {}
}
</script>

<style scoped></style>

子组件：

<template>
  <div>
    <div class=""></div>
    <h1>我是子组件的{{ data }}</h1>
    <button @click="fn">点击修改</button>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    data: {
      required: true // 必填
    }
  },
  name: '',
  methods: {
    fn () {
      this.data.push('哈密瓜')
    }
  }
}
</script>

<style scoped></style>

view图：

解决方法:

子组件

<template>
  <div>
    <div class=""></div>
    <h1>我是子组件的{{ newdata }}</h1>
    <button @click="fn">点击修改</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      newdata: [...this.data]
    }
  },
  props: {
    data: {
      required: true // 必填
    }
  },
  name: '',
  methods: {
    fn () {
      this.newdata.push('哈密瓜')
    }
  }
}
</script>

<style scoped></style>

 

解析:利用es6的扩展运算符,拷贝出一个新的地址，使两者不产生联系。

同理对象也是一样的。

父组件代码:

<template>
  <div class="">
    <h1>我是父组件的{{ obj }}</h1>
    <layout :data="obj"> </layout>
  </div>
</template>

<script>
import layout from './views/layout.vue'
export default {
  data () {
    return {
      obj: {
        name: '张飒',
        age: 20,
        sex: ''
      }
    }
  },
  components: {
    layout
  },
  name: '',
  methods: {}
}
</script>

<style scoped></style>

子组件:

<template>
  <div>
    <div class=""></div>
    <h1>我是子组件的{{ newobj }}</h1>
    <button @click="fn">点击修改</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      newobj: { ...this.data }
    }
  },
  props: {
    data: {
      required: true // 必填
    }
  },
  name: '',
  methods: {
    fn () {
      this.newobj.sex = '男'
    }
  }
}
</script>

<style scoped></style>

view:

 解析: 同样通过扩展运算符来产生一个新的对象，让两者互相不干扰。

三.总结

父传子的过程中

简单的数据类型是可以修改的,但是最好不要直接进行修改,因为会影响到子组件里面的数据。 需要在重新定义个变量并且赋值。

复杂的数据类型, 不能直接进行修改，因为用的是同一个地址。需要重新产生一个新的对象。

可以使用es6的扩展运算符来解决问题。