vue 하위 구성 요소는 상위 구성 요소의 메서드를 어떻게 호출합니까?

메서드: 1. 하위 컴포넌트의 "this.$parent.event"를 통해 상위 컴포넌트의 메소드를 호출합니다. 2. 하위 구성 요소는 "$emit"를 사용하여 상위 구성 요소에 대한 이벤트를 트리거하고 상위 구성 요소는 이 이벤트를 수신할 수 있습니다. 3. 상위 컴포넌트는 하위 컴포넌트에 메소드를 전달하며, 해당 메소드는 하위 컴포넌트에서 직접 호출할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vue에는 하위 컴포넌트에서 상위 컴포넌트를 호출하는 세 가지 방법이 있습니다. 참고로 세 가지 방법이 있습니다

첫 번째 방법은 this.$parent.event를 통해 상위 컴포넌트를 직접 호출하는 것입니다. 하위 구성 요소

상위 구성 요소

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

하위 구성 요소

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

두 번째 방법은 하위 구성 요소에서 $emit를 사용하여 상위 구성 요소에 대한 이벤트를 트리거하고 상위 구성 요소는 이 이벤트를 수신할 수 있습니다.

부모 구성 요소

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

자식 구성 요소

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

세 번째 방법은 부모 구성 요소가 메서드를 자식 구성 요소에 전달하고 이 메서드를 자식 구성 요소에서 직접 호출하는 것입니다.

부모 구성 요소

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

자식 구성 요소

<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.js tutorial]

위 내용은 vue 하위 구성 요소는 상위 구성 요소의 메서드를 어떻게 호출합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!