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

Dear 丶 2022-11-12 09:47 218阅读 0赞

# Vue中子组件调用父组件的方法，三种方法 #

*  **第一种方法是在子组件中通过this.$parent.event来调用父组件的方法**

父组件：

<template>
      <div>
        <child></child>
      </div>
    </template>
    <script>
      import child from '~/components/child';
      export default { 
        components: { 
          child
        },
        methods: { 
          fatherMethod() { 
            console.log('父组件方法');
          }
        }
      };
    </script>

子组件：

<template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default { 
        methods: { 
          childMethod() { 
            this.$parent.fatherMethod();
          }
        }
      };
    </script>

*  **第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件。**

父组件：

<template>
      <div>
        <child @fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/child';
      export default { 
        components: { 
          child
        },
        methods: { 
          fatherMethod() { 
            console.log('父组件方法');
          }
        }
      };
    </script>

子组件：

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

*  第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

父组件：

<template>
      <div>
        <child :fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/child';
      export default { 
        components: { 
          child
        },
        methods: { 
          fatherMethod() { 
            console.log('父组件方法');
          }
        }
      };
    </script>

子组件：

<template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default { 
        methods: { 
          childMethod() { 
            if (this.fatherMethod) { 
              this.fatherMethod();
            }
          }
        }
      };
    </script>