VUEJS 2.0 하위 구성 요소는 상위 구성 요소에 액세스/호출합니다.

다음은 VUEJS 2.0 하위 구성 요소가 상위 구성 요소에 액세스/호출하는 방법에 대한 예입니다. 매우 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

때로는 레이아웃 문제로 인해 하위 구성 요소가 상위 구성 요소에 데이터를 전달하고 상위 구성 요소의 특정 메서드를 실행해야 합니다. 코드에 들어가지 마세요.

하위 구성 요소:

<template> 
 <p class="isShowing" ref="isShowing"> 
 <p class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> 
  <ul ref="scroll_warpper_ul"> 
  <li class="menu-item" @click="goToFatherDetail(233)"> 
   
  </li> 
  </ul> 
 </p> 
 <v-loading class="isloading" v-show="hid_show_switch"></v-loading> 
 </p> 
</template> 
 
<script type="text/ecmascript-6"> 
 
 export default { 
 methods: { 
  goToFatherDetail (itemId) { 
  // this.$parent.$router.push(&#39;goToDetail&#39;); 
  console.log(&#39;子组件方法走了&#39; + itemId); 
  this.$emit(&#39;refreshbizlines&#39;, itemId); /* <span style="font-family: Arial, Helvetica, sans-serif;">itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/</span> 
 
  } 
 } 
 }; 
</script>

상위 구성 요소:

<template> 
 <p class="main-wrapper"> 
  <p class="tab-wrapper"> 
  <p class="tab-item"> 
   <router-link to="/isShowing" class="table-item-text">正在热映</router-link> 
  </p> 
  <p class="tab-item"> 
   <router-link to="/willShow" class="table-item-text">即将上映</router-link> 
  </p> 
  </p> 
 </p> 
 <router-view class="items-show" v-on:refreshbizlines="goToDetail" keep-alive></router-view> 
 </p> 
</template> 
 
<script type="text/ecmascript-6"> 
 
 export default { 
 methods: { 
  goToDetail (itemId) { 
  console.log(&#39;父组件走你：&#39; + itemId); 
  } 
 }<strong> 
 }; 
</script></strong>

상위 구성 요소는 v-on을 사용하여 감지할 모니터링 기능을 만듭니다. 최종 생성된 코드는

on: {
  "refreshbizlines": function($event) {
  _vm.goToDetail(123)
}
}

따라서 원리는 다음과 같습니다. 하위 구성 요소가 상위 구성 요소에 액세스하는지 확인합니다. 함수에 액세스하면 Refreshbizline 아래의

goToDetail 함수, 즉 상위 구성 요소

의

goToDetail 함수를 실행합니다.

상위 구성 요소의 모듈 이름에서 하위 구성 요소를 호출하려면 상위 구성 요소에 배치해야 합니다.

즐거운 코딩하세요.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

상위 구성 요소의 vuex 메서드가 상태 하위 구성 요소를 업데이트하고 제때 업데이트 및 렌더링할 수 없는 문제를 해결하는 방법

Vue 주석 프레임워크 구현 정보( 상위 구성 요소)

위 내용은 VUEJS 2.0 하위 구성 요소는 상위 구성 요소에 액세스/호출합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!