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

刺骨的言语ヽ痛彻心扉 2022-03-22 06:26 215阅读 0赞

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>