最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

VUEJS 2.0 子组件访问/调用父组件的实例

来源:懂视网 责编:小采 时间:2020-11-27 22:19:33
文档

VUEJS 2.0 子组件访问/调用父组件的实例

VUEJS 2.0 子组件访问/调用父组件的实例:有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class=isShowing ref=isShowing> <div class=menu-wrapper ref=scroll_wa
推荐度:
导读VUEJS 2.0 子组件访问/调用父组件的实例:有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class=isShowing ref=isShowing> <div class=menu-wrapper ref=scroll_wa

有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码:

子组件:

<template> 
 <div class="isShowing" ref="isShowing"> 
 <div 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> 
 </div> 
 <v-loading class="isloading" v-show="hid_show_switch"></v-loading> 
 </div> 
</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> 
 <div class="main-wrapper"> 
 <div class="tab-wrapper"> 
 <div class="tab-item"> 
 <router-link to="/isShowing" class="table-item-text">正在热映</router-link> 
 </div> 
 <div class="tab-item"> 
 <router-link to="/willShow" class="table-item-text">即将上映</router-link> 
 </div> 
 </div> 
 </div> 
 <router-view class="items-show" v-on:refreshbizlines="goToDetail" keep-alive></router-view> 
 </div> 
</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"

一定要放在 你父组件调用子组件的 模块名上。

祝你们 编码愉快。

以上这篇VUEJS 2.0 子组件访问/调用父组件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

文档

VUEJS 2.0 子组件访问/调用父组件的实例

VUEJS 2.0 子组件访问/调用父组件的实例:有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class=isShowing ref=isShowing> <div class=menu-wrapper ref=scroll_wa
推荐度:
标签: VUE js 2.0
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top