巧用Vue 父组件通过Prop向子组件传值
先看下vue官方的说法:
总结来说:Prop是单向数据流。只能父传子,子不可以传父。但是有一种情况子可以直接传父,而且无报警。
// 父组件
<template>
<div>
//父向子传值<br>
父组件:<input type="text" v-model="title">
<child :title=title></child>
</div>
</template>
<script>
import Child from "./Child"
export default {
data(){
return{
title:"张三"
}
},
components:{
"child":Child,
},
methods:{
}
}
</script>
// 子组件
<template>
<div>
// 子组件
<h2>{{title}}</h2>
子组件:<input type="text" v-model="title">
</div>
</template>
<script>
export default {
data() {
return {
childTitle:this.title
}
},
props:{
title:{
type:String,
require:true
}
},
methods:{
}
}
</script>
官方推荐子组件最好定义一个本地的data属性用来接收prop传过来的值。然后对本地data值进行操作处理,再通过$emit命令,将改变的值发送给父组件,实现父子组件通信。
在开发中,如果我们仅仅是通过子组件展示父组件传过来的数据,并不会对数据进行操作,我们可以直接把prop传过来的值直接绑定页面展示即可,这样,父组件值的更改,子组件可实时展示。
如果子组件本地data接收prop的值,这样父组件值的更改,子组件无法获知,这样可以通过watch监听prop数据的变化。
看如上代码,如果我们页面绑定prop数据,直接改变值,则页面报错。
vue不允许子组件直接改变父组件的值。
接下来,我们换下数据类型对上面的代码稍稍改动再看下。
// 父组件
<template>
<div>
//父向子传值<br>
父组件:<input type="text" v-model="title.name">
<child :title=title></child>
</div>
</template>
<script>
import Child from "./Child"
export default {
data(){
return{
title:{
name:'张三'
}
}
},
components:{
"child":Child,
},
methods:{
}
}
</script>
// 子组件
<template>
<div>
// 子组件
<h2>{{title.name}}</h2>
子组件:<input type="text" v-model="title.name">
</div>
</template>
<script>
export default {
data() {
return {
childTitle:this.title
}
},
props:{
title:{
type:Object,
require:true
}
},
methods:{
}
}
</script>
我们将prop传输的数据类型改为Object,在子组件直接更改prop传过来的值页面并不会报错。这是为何?
因为Object是引用数据类型,父子组件绑定的同一个堆内存中的对象。
这可以作为一个父子组件双向通信的简易方案。