有时候因为布局问题,需要子组件把数据传给父组件,并执行父级的某个方法,不多说上代码:
& lt; template>
& lt; div类=" isShowing " ref=癷sShowing”比;
& lt; div类=" menu-wrapper " ref=皊croll_warpper v-show”=? hid_show_switch”比;
& lt; ul ref=皊croll_warpper_ul”比;
& lt;李类="菜单项“@click=癵oToFatherDetail(233)“比;
& lt;/li>
& lt;/ul>
& lt;/div>
& lt; v-loading类=癷sloading v-show”=癶id_show_switch”祝辞& lt;/v-loading>
& lt;/div>
& lt;/template>
& lt;脚本类型=拔谋?ecmascript-6”比;
出口默认{
方法:{
goToFatherDetail (itemId) {//这个。父母。router.push美元(“goToDetail”);
控制台。日志(“子组件方法走了”+ itemId);
这一点。美元发出(refreshbizlines, itemId);/* & lt;跨度祝辞itemId就是子要传的数据,这里很重要,refreshbizlines就是父组件美元在监测的自定义函数不是父组件的自定义函数*/& lt;/span>
}
}
}；
& lt;/script>之前
& lt; template>
& lt; div类=癿ain-wrapper”比;
& lt; div类=皌ab-wrapper”比;
& lt; div类=皌ab-item”比;
& lt; router-link="/isShowing”类=皌able-item-text祝辞正在热映& lt;/router-link>
& lt;/div>
& lt; div类=皌ab-item”比;
& lt; router-link="/willShow”类=皌able-item-text祝辞即将上映& lt;/router-link>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; router-view class="条目表明“v: refreshbizlines=癵oToDetail”keep-alive> & lt;/router-view>
& lt;/div>
& lt;/template>
& lt;脚本类型=拔谋?ecmascript-6”比;
出口默认{
方法:{
goToDetail (itemId) {
控制台。日志(“父组件走你:' + itemId);
}
}& lt; strong>
}；
& lt;/script> & lt;/strong>之前
父组件用v来做个监测的函数来检测,最终生成的代码是类似
:{
“refreshbizlines”:函数(事件){
_vm.goToDetail (123)
}
}
所以原理就是子组件访问父组件的检测函数refreshbizlines,访问了,则执行refreshbizline下面的函数
goToDetail——也就是父组件的
goToDetail函数
注意父组件的
v: refreshbizlines=" goToDetail "
一定要放在你父组件调用子组件的模块名上。
祝你们编码愉快。
以上这篇VUEJS 2.0子组件访问/调用父组件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
