Vue | Vue子组件和父组件如何互相调用对方的方法

★ Vue中子组件调用父组件的方法总结

1、子组件中通过“ this.$parent.event ”来调用父组件的方法。

2、子组件用“$emit”向父组件触发一个事件，父组件监听这个事件即可。

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

Vue中子组件调用父组件的方法，这里有三种方法提供参考。

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

父组件(Parent.vue)：

<template>
  <p>
    <child></child>
  </p>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件(child)：

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

 第二种方法是在子组件里用 $emit()向父组件触发一个事件，父组件监听这个事件就行了

父组件(Parent.vue)：

<template>
  <p>
    <child @fatherMethod="fatherMethod"></child>
  </p>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件(child)：

<template>
  <p>
    <button @click="childMethod()">点击</button>
  </p>
</template>
<script>
  export default {
    methods: {
      childMethod() {
       // 子组件通过$emit()触发事件
        this.$emit('fatherMethod'); 
      }
    }
  };
</script>

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

父组件(Parent.vue)：

<template>
  <p>
    <child :fatherMethod="fatherMethod"></child>
  </p>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件(child)：

<template>
  <p>
    <button @click="childMethod()">点击</button>
  </p>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

★ Vue中父组件调用子组件的方法总结

在Vue中，父组件可以通过几种方式调用子组件的方法：

1. 使用ref属性引用子组件实例，然后在父组件中通过this.$refs.refName.methodName()调用。

2. 使用事件派发，子组件通过$emit触发一个事件，父组件监听这个事件来调用子组件的方法。

下面是使用ref的例子：

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>Child Component</p>
  </div>
</template>
 
<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called');
    }
  }
};
</script>

下面是使用事件派发的例子：

<!-- 父组件 -->
<template>
  <div>
    <child-component @call-child-method="parentMethod"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      console.log('Parent method called');
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>Child Component</p>
    <button @click="callParentMethod">Call Parent Method</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    callParentMethod() {
      this.$emit('call-child-method');
    }
  }
};
</script>

在这两个例子中，我们展示了如何在父组件中调用子组件的方法。第一个例子使用ref来直接调用，第二个例子通过自定义事件来触发父组件的方法。