程序员必知：Vue子传父的三种方法

区别在代码中已标出

1.props方式

父组件内容

{ {msg}}

// 引入子组件

import CustomSchool from '@/components/3Custom/CustomSchool.vue'

export default {

components: { CustomSchool},

data() {

return {

msg: '你好啊!'

}

},

methods:{

getSchoolName(data){

this.msg = data

}

}

}

子组件内容

学校名称：{ {name}}

学校地址：{ {address}}

把学校名发送给父组件

export default {

props:【'childEvent'】,

data() {

return {

name: 'rxy',

address: '北京'

}

},

methods:{

sendSchoolName(){

this.childEvent(this.name)

}

}

}

2.this.$emit方式(绑定自定义事件)

父组件内容

{ {msg}}

import CustomSchool from '@/components/3Custom/CustomSchool.vue'

export default {

components: { CustomSchool},

data() {

return {

msg: '你好啊'

}

},

methods:{

getSchoolName(data){

this.msg = data

}

}

}

子组件内容

学校名称：{ {name}}

学校地址：{ {address}}

把学校名发送给App

　　　　　　解绑自定义事件

export default {

data() {

return {

name: 'rxy',

address: '北京'

}

},

methods:{

sendSchoolName(){

　　 this.$emit('childEvent',this.name)

}，

　　　　　unbind() {

　　　　　　　　// this.$off('childEvent') //适用于解绑单个事件

// this.$off(【'childEvent', 'demo'】) //解绑多个自定义事件

this.$off() //解绑所有自定义事件

　}，

}

}

3.使用eventBus(更灵活) 例：可用定时器

父组件内容，通过ref方式获取

{ {msg}}

import CustomSchool from '@/components/3Custom/CustomSchool.vue'

export default {

components: { CustomSchool},

data() {

return {

msg: '你好啊'

}

},

mounted() {

setTimeout(() => {

this.$refs.school.$on('schoolEvent', e => {

this.msg = e

})

}, 3000)

　　　　// this.$refs.student.$on('studentEvent',this.getSchoolName) //两种方式都可以

},

methods: {

　　　 　getSchoolName(data) {

this.msg = data

}//代码效果参考：http://www.ezhiqi.com/zx/art_4090.html ,

　　}

}

子组件内容

学校名称：{ {name}}//代码效果参考：http://www.ezhiqi.com/zx/art_5774.html

学校地址：{ {address}}//代码效果参考：http://www.ezhiqi.com/zx/art_4848.html

把学校名发送给App

export default {

data() {

return {

name: 'rxy',

address: '北京'

}

},

methods: {

sendSchoolName() {

this.$emit('schoolEvent',this.name)

}

}

}