【Vue】9.vue中子组件调用父组件的方法

vue中子组件调用父组件的方法，这里总结了三种：

1.直接在子组件中通过this.$parent.event来调用父组件的方法

Parent.vue

<template>
    <div>
      <child></child>
    </div>
</template>

<script>
  import Child from '../../components/Child.vue';

    export default {
      data() {
        return {
          name: 'Parent',
        };
      },
      methods: {
        fatherMethod() {
          console.log('testing');
        },
      },
      components: {
        child: Child,
      },
    };
</script>

<style scoped>

</style>

Child.vue

<template>
  <div>
    <button @click="childMethod">点击调用父组件方法</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: 'Child',
      };
    },
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      },
    },
  };
</script>

<style scoped>

</style>

2.在子组件里用$emit()向父组件触发一个事件，父组件监听这个事件就行了

Parent.vue

<template>
    <div>
      <child v-on:fatherMethod="fatherMethod"></child>
    </div>
</template>

<script>
  import Child from '../../components/Child.vue';

    export default {
      data() {
        return {
          name: 'Parent',
        };
      },
      methods: {
        fatherMethod() {
          console.log('testing');
        },
      },
      components: {
        child: Child,
      },
    };
</script>

<style scoped>

</style>

Child.vue

<template>
  <div>
    <button @click="childMethod">点击调用父组件方法</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: 'Child',
      };
    },
    methods: {
      childMethod() {
        // this.$parent.fatherMethod();
        this.$emit('fatherMethod');
      },
    },
  };
</script>

<style scoped>

</style>

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

Parent.vue

<template>
    <div>
      <child :fatherMethod="fatherMethod"></child>
    </div>
</template>

<script>
  import Child from '../../components/Child.vue';

    export default {
      data() {
        return {
          name: 'Parent',
        };
      },
      methods: {
        fatherMethod() {
          console.log('testing');
        },
      },
      components: {
        child: Child,
      },
    };
</script>

<style scoped>

</style>

Child.vue

<template>
  <div>
    <button @click="childMethod">点击调用父组件方法</button>
  </div>
</template>

<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null,
      },
    },
    data() {
      return {
        name: 'Child',
      };
    },
    methods: {
      childMethod() {
        // this.$parent.fatherMethod();
        // this.$emit('fatherMethod');
        this.fatherMethod();
      },
    },
  };
</script>

<style scoped>

</style>