Vue子组件怎么调用父组件的方法 Vue子组件调用父组件函数的三种方法

最新推荐文章于 2024-03-10 10:12:44 发布

沉沦与遐想。

最新推荐文章于 2024-03-10 10:12:44 发布

阅读量4.3k

点赞数 4

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45466204/article/details/126232074

版权

笔记专栏收录该内容

21 篇文章 2 订阅

订阅专栏

this.$parent.event

父组件中定义一个方法parentFun

<template>
  <div>
      父组件
      <child></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
  name: "parent",
  components: {
    child,
  },
  data() {
    return {
      parentFun(cdata){
        console.log(cdata,"cdata");
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    
  },
};
</script>
<style lang='less' scoped>
</style>

子组件中通过this.$parent.parentFun，来调用父组件的方法。

<template>
  <div>
    <button @click="childFun">子组件按钮</button>
  </div>
</template>
<script>
export default {
  name: "child",
  components: {
  },
  data() {
    return {
      
    };
  },
  created() {},
  mounted() {},
  methods: {
    childFun(){
      this.$parent.parentFun("子组件数据")
    }
  },
};
</script>
<style lang='less' scoped>
</style>

this.$emit(“父组件自定义事件”,“子组件要传达到父组件数据”)

在父组件中给子组件上添加一个自定义函数，把父组件中的方法传递进去

<template>
  <div>
      父组件
      <child @fatherMethod="parentFun"></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
  name: "parent",
  components: {
    child,
  },
  data() {
    return {
      parentFun(cdata){
        console.log(cdata,"cdata");
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    
  },
};
</script>
<style lang='less' scoped>
</style>

子组件中通过this.$emit("父组件传递过来的函数","子组件数据")来触发父组件函数

<template>
  <div>
    <button @click="childFun">子组件按钮</button>
  </div>
</template>
<script>
export default {
  name: "child",
  components: {
  },
  data() {
    return {
      
    };
  },
  created() {},
  mounted() {},
  methods: {
    childFun(){
      this.$emit("fatherMethod","子组件数据")
    }
  },
};
</script>
<style lang='less' scoped>
</style>

父组件把方法传入子组件中，在子组件里直接调用

父组件

<template>
  <div>
      父组件
      <child :parentFun="parentFun"></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
  name: "parent",
  components: {
    child,
  },
  data() {
    return {
    };
  },
  created() {},
  mounted() {},
  methods: {
     parentFun(cdata){
        console.log(cdata);
      }
  },
};
</script>
<style lang='less' scoped>
</style>

子组件中直接调用方法

<template>
  <div>
    <button @click="childFun">子组件按钮</button>
  </div>
</template>
<script>
export default {
  name: "child",
  components: {
  },
  data() {
    return {      
    };
  },
  created() {},
  mounted() {},
  methods: {
    childFun(){
     if (this.parentFun) {
          this.parentFun("子组件数据");
        }
    }
  },
};
</script>
<style lang='less' scoped>
</style>