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

栏目: 编程语言 · JavaScript · 发布时间: 8年前

内容简介:这篇文章主要介绍了Vuejs 2.0 子组件访问/调用父组件的方法(示例代码),需要的朋友可以参考下

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

子组件:

<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"

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

菜鸟侦探挑战数据分析

菜鸟侦探挑战数据分析

[日] 石田基广 / 支鹏浩 / 人民邮电出版社 / 2017-1 / 42

本书以小说的形式展开,讲述了主人公俵太从大学文科专业毕业后进入征信所,从零开始学习数据分析的故事。书中以主人公就职的征信所所在的商业街为舞台,选取贴近生活的案例,将平均值、t检验、卡方检验、相关、回归分析、文本挖掘以及时间序列分析等数据分析的基础知识融入到了生动有趣的侦探故事中,讲解由浅入深、寓教于乐,没有深奥的理论和晦涩的术语,同时提供了大量实际数据,使用免费自由软件RStudio引领读者进一步......一起来看看 《菜鸟侦探挑战数据分析》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具