Vuejs2.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)
}
}

따라서 하위 구성요소가 상위 구성요소의 감지 기능인 Refreshbizlines에 액세스하는 것이 원칙입니다. 액세스하면 Refreshbizline 아래 함수가 실행됩니다.

goToDetail, 즉

goToDetail 함수입니다. 상위 컴포넌트

상위 컴포넌트의

에 주의하세요.

v-on:refreshbizlines="goToDetail"

하위 컴포넌트를 호출하는 상위 컴포넌트의 모듈 이름에 배치되어야 합니다.

관련 권장 사항:

vuejs2.0은 이벤트 모니터링 데이터 전송_javascript 기술을 위해 $emit를 사용하여 페이징 구성 요소를 구현합니다

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