区别在代码中已标出
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)
}
}
}
