父子组件间的通信之props
文章目录
前言
在vue的学习过程中,我们将会接触很多种关于组件之间通信的方法,有父传子、子传父、兄弟之间传递。这篇文章讲的是一个既可以父传子又可以子传父的方法——props!
一、props的使用之父组件数据传给子组件
1.应用场景
1、假设父组件从后台服务器中获取到了某列表信息:
2、而当点开作为子组件的编辑,列表信息呈现在编辑的表单中,在没有额外接口获取数据的情况下,我们可以直接去父组件中获取对应数据,这个时候相信光的props可以申请出战了。
2.用一段代码感受一下props
父组件代码:
<template>
<div>
<son :father="name" />
<input type="text" v-model="name" />
</div>
</template>
<script>
import son from './components/son.vue'
export default {
components: {
son
},
data() {
return {
name: "无处安放的灵魂",
age:'800岁'
}
}
</script>
3.子组件的代码展示
<template>
<div>{{father}}
<input type="text" v-model="father" />
</div>
</template>
<script>
export default {
props: {
father: String
}
}
</script>
4、运行结果
5、props校验:不加限制条件、加required、default、type
1、不加校验
<script>
export default {
props:[father],
}
</script>
2、校验多个类型
<script>
export default {
props:{
father:[String,Number,Boolean]
}
}
</script>
3、加required或default或type
<script>
export default {
props:{
father:{
type:String,
required:true,
default:"三水木雨"
}
}
}
</script>
6、props父子组件间通信,数据单向流动的特点
1、举个例子
3、解决办法
前话:把props中的fatehr数据赋予给另一个变量data,再把data挂在到页面中去。此时v-model下改变data值不会影响到father数据,也就不会报错(不会违背“单向流动的特点”)。
4、代码展示
父组件:
<template>
<div>
<son :father="name" />
<input type="text" v-model="name" />
</div>
</template>
<script>
import son from './components/son.vue'
export default {
components: {
son
},
data() {
return {
name: "无处安放的灵魂"
}
}
}
</script>
子组件:
<template>
<div v-if="data">{{data}}
<input type="text" v-model="data" />
</div>
</template>
<script>
export default {
props: {
father: String
},
data() {
return {
data: this.father,
}
}
}
</script>
7、父组件给子组件传动态数据
在子组件中添加watch监听事件,监听父组件数据的更改,话不多说,见代码:
<template>
<div>{{data}}
<input type="text" v-model="data" />
</div>
</template>
<script>
export default {
props: {
father: String
},
data() {
return {
data: this.father,
}
},
watch: {
father() {
this.data=this.father
}
}
}
</script>
8、众所周知,在编辑表单过程中,输入的数据会传入父组件的表格之中。也就是说在实际应用中会遇到在子组件获取父组件数据的同时,子组件数据的改变也会影响父组件数据。因此,怎么让这里的父组件数据随子组件数据改变而改变?
总结
未完待续。。。。。。