때때로 레이아웃 문제로 인해 하위 구성 요소가 상위 구성 요소에 데이터를 전달하고 상위 구성 요소의 특정 메서드를 실행해야 하는 경우가 있습니다. 이 글에서는 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('goToDetail'); console.log('子组件方法走了' + itemId); this.$emit('refreshbizlines', 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('父组件走你:' + 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!