Vue中子组件调用父组件的方法

最新推荐文章于 2024-01-31 11:22:56 发布

cjxIt

最新推荐文章于 2024-01-31 11:22:56 发布

阅读量1.6k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cjxIt/article/details/134177769

版权

第一种方法 在子组件里用$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">