Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)

2018-02-10 13:13:00来源:作者:人点击

分享

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

子组件:

<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 子组件访问/调用父组件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对第七城市网站的支持!

您可能感兴趣的文章:

  • vue父组件向子组件动态传值的两种方法
  • vue父组件中获取子组件中的数据(实例讲解)
  • vue父组件通过props如何向子组件传递方法详解
  • 详解vue2父组件传递props异步数据到子组件的问题
  • 详解vue.js2.0父组件点击触发子组件方法
  • Vue2.x中的父组件传递数据至子组件的方法
  • vue的props实现子组件随父组件一起变化

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台