目录
父子间传递数据
方法1:通过传递函数类型的props实现
案例:
学校与学生分别是两个小组件,装在App大组件中
点击按钮出现弹窗
首先要在School组件中的button按钮绑定上点击事件,用来传递value值
<template>
<div class="school">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="sendSchoolName">把学校名给App</button>
</div>
</template>
接下来在父组件App中也加上最终要实现弹窗的方法
methods: {
getSchoolName(schoolName) {
alert(schoolName)
},
getSchoolName需要加上形参的原因是,该方法需要在在School组件中的获取到value值(即学校的名字),在School组件中也是需要有形参的
之后将该方法传递给子组件School
<School :getSchoolName="getSchoolName" />
接下来在子组件School中接收该方法(利用props属性)
props:['getSchoolName']
子组件中添加上该方法
methods: {
sendSchoolName(){
this.getSchoolName(this.name)
}
},
这个是通过父组件给子组件传递函数类型的props实现,子给父传递数据,也是最直观的方法
方法2:通过父组件给子组件绑定一个自定义事件实现
这个方法不需要父子之间来回传递接收
首先在父组件的引用组件标签中注明要绑定的事件名称
v-on在Student这个组件标签上,所以说是给Student这个组件的实例对象vc身上绑定的事件,事件名字就叫bridge(接收数据的函数),一旦触发这个事件,getStudentName函数(触发事件的函数)就会调用
写一个组件标签,底层就会创建一个VueComponent对象
<Student v-on:bridge="getStudentName" />
接下来在App组件中添加上触发事件的函数
methods: {
getStudentName(name){
alert(name)
},
},
下面就是要触发这个传输数据的事件bridge
原则:给谁绑定的事件,就用谁去触发这个事件,所以就要找到Student组件的实例对象了
<button @click="sendStudentName">把学生名给App</button>
接下来添加事件sendStudentName事件属性
借助一个特殊的方法$emit,可以认为是触发的意思,参数分别是要触发的事件('bridge'),以及要传递的数据vc的实例对象name,写法即为this.name
methods: {
sendStudentName() {
//触发Student组件实例身上的atguigu事件
this.$emit('bridge',this.name)
},
}
方法3:通过使用ref子给父传递数据
通过App组件的实例对象,vc.$refs.student就可以获取到子组件的实例对象
在第二种方法Student拥有senStudentName方法和bridge事件的基础上,对App组件进行修改
<Student ref="student"/>
当vm挂载完毕,获取到Student的组件实例对象(this.$refs.student)
当bridge这个事件被触发时,执行弹窗事件getStudentName
mounted(){
//this.$refs.student【student的组件实例对象】
this.$refs.student.$on('brideg',this.getStudentName)
}
第三种方法和第二种方法的区别就是,绑定时机不同,原理是一样的。