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的扩展运算符来解决问题。