props子给父传值
<School :getSchoolName="getSchoolName"/> //父组件
methods: {
getSchoolName(name){
console.log('App收到了学校名',name);
}},
子组件
export default {
props:['getSchoolName'],
data(){
return {name:'尚硅谷',address:'北京'}},
methods: {
sendSchoolName(){
this.getSchoolName(this.name) }},}
子组件的自定义事件
适用于 子组件 ===> 父组件
绑定一个自定义事件实现: 子给父传递数据 第一种方法 使用@ 或v-on
<Student v-on:atguigu="getStudentName"/>
<Student @atguigu.once="getStudentName"/> //只触发一次
methods: {
getStudentName(name, ...params ){ //...params把所有传递过来的参数放到params里面
console.log('demo被调用了',name); }},
子组件
methods: {
sendStudentName(){
this.$emit('atguigu',this.name)},}, //触发Student组件实例身上的 atguigu
绑定一个自定义事件实现: 子给父传递数据 第二种方法 使用ref
父组件
<Student ref="student"/>
mounted() {
this.$refs.student.$on('atguigu',this.getStudentName) //可以加定时器
this.$refs.student.$once('atguigu',this.getStudentName) //只触发一次
},
子组件
methods: {
sendStudentName(){
this.$emit('atguigu',this.name)},}, //触发Student组件实例身上的 atguigu
解绑自定义事件
<button @click="unbind">解绑atguigu事件</button>
unbind(){
this.$off('atguigu') //解绑一个自定义事件
this.$off(['atguigu','demo']) //解绑多个自定义事件
this.$off() //解绑所有自定义事件
}
若想让自定义事件只触发一次可以使用 once修饰符 或$once方法
触发自定义事件 this.$emit('auguigu',数据)
组件上也可以绑定原生DOM事件，需要使用native修饰符
<Student ref="student" @click.native="show"/>
