第一种方法 在子组件里用$emit
向父组件触发一个事件,父组件监听这个事件就行了
父组件
<template>
<div
<van-popup v-model='registerShow' closeable round @close="showToast()">
//在组件上定义方法
<register ref="child" @showToast='showToast'></register>
</van-popup>
</div>
</template>
<script>
export default {
name: 'login',
components: {
register
},
data() {
return {
registerShow:false,
}
},
methods: {
//父组件
showToast(){
//调用子组件方法
this.$refs.child.cleanUserinfo()
this.$refs.child.getUserinfo()
this.registerShow =false
},
}
}
</script>
<style scoped lang="less">
</style>
子组件
<template>
<div
<van-button @click='onSubmit'></van-button>
</div>
</template>
<script>
export default {
name: 'register',
components: {
},
data() {
return {
}
},
methods: {
onSubmit(){
//调用父组件方法
this.$emit('showToast')
}
},
}
</script>
<style scoped lang="less">
</style>
第二种方法 是直接在子组件中通过this.$parent.event来调用父组件的方法
父组件
<template>
<div
<van-popup v-model='registerShow'>
//子组件
<register></register>
</van-popup>
</div>
</template>
<script>
export default {
name: 'login',
components: {
register
},
data() {
return {
registerShow:false,
}
},
methods: {
//父组件
showToast(){
this.registerShow =true
},
}
}
</script>
<style scoped lang="less">
</style>
子组件
<template>
<div
<van-button @click='onSubmit'></van-button>
</div>
</template>
<script>
export default {
name: 'register',
components: {
},
data() {
return {
}
},
methods: {
onSubmit(){
//调用父组件方法
this.$parent.showToast();
}
},
}
</script>
<style scoped lang="less">
第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法
父组件
<template>
<div
<van-popup v-model='registerShow'>
//子组件上
<register :showToast='showToast'></register>
</van-popup>
</div>
</template>
<script>
export default {
name: 'login',
components: {
register
},
data() {
return {
registerShow:false,
}
},
methods: {
//父组件
showToast(){
this.registerShow =false
},
}
}
</script>
<style scoped lang="less">
</style>
子组件
<template>
<div
<van-button @click='onSubmit'></van-button>
</div>
</template>
<script>
export default {
name: 'register',
props: {
showToast:{
type:Function,
default:null
}
},
components: {
},
data() {
return {
}
},
methods: {
onSubmit(){
//调用父组件方法
if(this.showToast){
this.showToast()
}
}
},
}
</script>
<style scoped lang="less">