Vue 상위 구성 요소에서 하위 구성 요소의 메서드를 호출하는 방법

호출 방법: 1. 상위 구성 요소에서 ref를 통해 하위 구성 요소의 메서드를 직접 호출합니다. 2. 상위 구성 요소에서 구성 요소의 "$emit" 및 "$on" 메서드를 통해 호출합니다.

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

Vue 프로젝트의 상위 구성 요소에서 하위 구성 요소 메서드를 직접 호출하는 방법:

옵션 1: ref를 통해 하위 구성 요소 메서드를 직접 호출

//父组件中

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from &#39;./child&#39;;

export default {
    methods: {
        handleClick() {
              this.$refs.child.sing();
        },
    },
}
</script>


//子组件中

<template>
  <div>我是子组件</div>
</template>
<script>
export default {
  methods: {
    sing() {
      console.log(&#39;我是子组件的方法&#39;);
    },
  },
};
</script>

옵션 2: 구성 요소의 $를 통해 방출, $on 메소드;

//父组件中

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from &#39;./child&#39;;

export default {
    methods: {
        handleClick() {
               this.$refs.child.$emit("childmethod")    //子组件$on中的名字
        },
    },
}
</script>

//子组件中

<template>
    <div>我是子组件</div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(function() {
            this.$on(&#39;childmethods&#39;, function() {
                console.log(&#39;我是子组件方法&#39;);
            });
        });
     },
};
</script>

관련 추천: "vue.js tutorial"

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