Vue 상위 구성 요소에서 하위 구성 요소의 메서드를 호출하는 방법-View.js-php.cn

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

青灯夜游

풀어 주다： 2021-10-26 14:28:20

원래의

121728명이 탐색했습니다.

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

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

이 튜토리얼의 운영 환경: 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>

로그인 후 복사