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

最新推荐文章于 2024-11-30 10:30:05 发布

原创最新推荐文章于 2024-11-30 10:30:05 发布 · 250 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍在Vue.js中实现父子组件间通信的三种方法：通过this.$parent调用父组件方法，使用this.$emit触发事件通知父组件，以及将父组件方法作为属性传递给子组件直接调用。

第一种在子组件中通过this.$parent.event来调用；

父组件：

<template>
  <div>
    <testchild></testchild>
  </div>
</template>
<script>
  import testchild from "./testchild";
  export default {
    components: {
      testchild
    },
    methods: {
      fatherFun(obj) {
        alert('我是父组件的方法'+obj);
      }
    }
  };
</script>

子组件：

<template>
  <div>
    <button @click="childFun('1111')">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childFun(obj) {
        this.$parent.fatherFun(obj);//调用父组件中的方法
      }
    }
  };
</script>

第二种是在子组件中用this.$emit

父组件：

<template>
  <div>
    <testchild @fatherFun="fatherFun"></testchild>
  </div>
</template>
<script>
  import testchild from './testchild';
  export default {
    components: {
      testchild
    },
    methods: {
      fatherFun(obj) {//带参数形式
        console.log('测试');
        console.log(obj)
      }
    }
  };
</script>

子组件：

<template>
  <div>
    <button @click="childFun()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childFun() {
        this.$emit('fatherFun','1');
      }
    }
  };
</script>

第三种是把父组件的方法传到子组件中，在子组件中直接调用

父组件：

<template>
  <div>
    <testchild :fatherFun="fatherFun"></testchild>
  </div>
</template>
<script>
  import testchild from './testchild';
  export default {
    components: {
      testchild
    },
    methods: {
      fatherFun(obj) {
        console.log('测试111');
        console.log(obj)
      }
    }
  };
</script>

子组件：

<template>
  <div>
    <button @click="childFun()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherFun: {
        type: Function,
        default: null
      }
      },
    methods: {
      childFun() {
        if (this.fatherFun) {
          this.fatherFun('2222');
        }
      }
    }
  }
</script>

以上三种方法，亲测好用！