首页 > 编程 > JavaScript > 正文

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

2019-11-19 14:22:07
字体:
来源:转载
供稿:网友

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

子组件:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表