VUEJS2.0子组件访问/调用父组件的实例

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

会宁网站制作公司哪家好，找成都创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。成都创新互联公司公司2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。

子组件：

<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 >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 子组件访问/调用父组件的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。

分享文章：VUEJS2.0子组件访问/调用父组件的实例
新闻来源：https://www.cdcxhl.com/article46/pedehg.html

成都网站建设公司_创新互联，为您提供服务器托管、网站设计公司、域名注册、网站建设、企业建站、外贸建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容