目录
一、props概念
1、作用
让组件接收外部传过来的数据
2、适用场景
父子组件通信
3、三种书写方式
① 只接收:props:["name"]
;
② 限制类型:props:{name:String}
;
③ 限制类型,限制必要性,指定默认值:props:{name:{type:string,required:true}}
二、案例演练
1、父组件向子组件传递数据
父组件向子组件传递数据(非函数),本质是父向子传递数据
父组件
<template>
<div id="app">
<h3>通过props实现父向子传数据</h3>
<Student :sendName="name"/>
</div>
</template>
<script>
import Student from './components/Student.vue'
export default {
name: 'App',
data(){
return {
name:"憨瓜",
}
},
components: {Student},
}
</script>
子组件
<template>
<div>
<p>学生姓名是:{{sendName}}</p>
</div>
</template>
<script>
export default {
name:"Student",
props:["sendName"],
}
</script>
运行结果
2、子组件向父组件传递数据
父组件给子组件传递数据(函数):本质其实是子组件给父组件传递数据
父组件
<template>
<div id="app">
<h3>通过props配置项得到学校的名称是:{{sName}}</h3>
<School :getName="getName"/>
</div>
</template>
<script>
import School from './components/School.vue'
export default {
name: 'App',
data(){
return {
sName:""
}
},
components: {School},
methods:{
getName(name){
this.sName=name
}
}
}
</script>
子组件
<template>
<div>
<p>学校名称:{{name}}</p>
<p>学校地址:{{adress}}</p>
<button @click="sendName">通过props实现子向父传递数据</button>
</div>
</template>
<script>
export default {
name:"School",
data(){
return {
name:"喵喵学院",
adress:"郑州"
}
},
props:["getName"],
methods:{
sendName(){
this.getName(this.name)
}
}
}
</script>
运行结果
三、进阶学习
1、props与data中属性名相同
父组件
<template>
<div id="app">
<h3>props与data中数据属性名相同时</h3>
<Student :sendName="name"/>
</div>
</template>
<script>
import Student from './components/Student.vue'
export default {
name: 'App',
data(){
return {
name:"憨瓜",
}
},
components: {Student},
}
</script>
子组件
<template>
<div>
<p>学生姓名是:{{sendName}}</p>
</div>
</template>
<script>
export default {
name:"Student",
//data中的name与props传递的一样
data(){
return {
sendName:"波妞",
}
},
props:["sendName"],
}
</script>
运行结果
结论:控制台警告,但运行结果优先级:props > data
2、修改props传入的数据
父组件
//代码用上面1中的父组件的代码即可
子组件
<template>
<div>
<p>学生姓名是:{{sendName}}</p>
<button @click="changeName">点击修姓名</button>
</div>
</template>
<script>
export default {
name:"Student",
props:["sendName"],
methods:{
//修改父组件传进来的数据
changeName(){
this.sendName="波妞";
}
}
}
</script>
运行结果
结论:props是单向数据流
,修改props中的数据页面会更改,但控制台会警告
3、正确修改props方法
复制props中的数据到data中一份,然后去修改data中的数据
<template>
<div>
<p>学生姓名是:{{cName}}</p>
<button @click="changeName">点击修姓名</button>
</div>
</template>
<script>
export default {
name:"Student",
//1、将props中的数据复制到data中
data(){
return {
cName:this.sendName,
}
},
props:["sendName"],
methods:{
//2、修改data中的数据
changeName(){
this.cName="波妞"
}
}
}
</script>
运行结果
四、总结
1、如果父组件给子组件传递数据(非函数): 本质其实是父组件给子组件传递数据
2、如果父组件给子组件传递数据(函数):本质其实是子组件给父组件传递数据
3、如果props中的属性和data中的属性相同,那么显示的为props中的属性,优先级:props > data
,但控制台会发出警告
4、props是单向数据流,默认是只读的
5、vue底层会监视到我们对props的修改,如果进行了修改,页面显示修改的数据,但控制台会发出警告,如业务需求确实要改,那么要复制props的内容到data中一份,然后修改data中的数据