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

 更新时间:2018年02月08日 14:33:18   作者:wpj130  
这篇文章主要介绍了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"

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

总结

以上所述是小编给大家介绍的Vuejs 2.0 子组件访问/调用父组件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Vue 中 provide和inject的使用

    Vue 中 provide和inject的使用

    这篇文章主要介绍了Vue中provide和inject的使用,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-08-08
  • vue.js学习之UI组件开发教程

    vue.js学习之UI组件开发教程

    前端开发中,随着业务的增多,出于效率的考虑,我们对于组件化开发的需求也越来越迫切。下面这篇文章主要给大家介绍了关于vue.js之UI组件开发的相关资料,文中介绍的非常详细,需要的朋友们下面来一起看看吧。
    2017-07-07
  • Vue 3项目如何安装Element-Plus

    Vue 3项目如何安装Element-Plus

    Element Plus 是一个基于 Vue 3 的现代前端UI框架,它旨在提升开发体验,并为开发者提供高效、优雅的组件,在本文中将详细介绍如何在 Vue 3 项目中安装 Element Plus,感兴趣的朋友一起看看吧
    2024-07-07
  • 函数式组件劫持替代json封装element表格

    函数式组件劫持替代json封装element表格

    这篇文章主要介绍了为大家函数式组件劫持替代json封装element表格的过程思路及示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue开发环境中修改端口号的实现方法

    Vue开发环境中修改端口号的实现方法

    这篇文章主要介绍了Vue开发环境中修改端口号的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 一文快速学会阻止事件冒泡的4种方法(原生js阻止,vue中使用修饰符阻止)

    一文快速学会阻止事件冒泡的4种方法(原生js阻止,vue中使用修饰符阻止)

    冒泡就是事件开始是由最具体的元素接收,然后逐层向上级传播到较为不具体的元素,这篇文章主要给大家介绍了关于阻止事件冒泡的4种方法,文中介绍的方法分别是原生js阻止以及vue中使用修饰符阻止的相关资料,需要的朋友可以参考下
    2023-12-12
  • vue3的动态组件是如何工作的

    vue3的动态组件是如何工作的

    这篇文章主要介绍了vue3的动态组件是如何工作的,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • Vue.js项目前端多语言方案的思路与实践

    Vue.js项目前端多语言方案的思路与实践

    前端的国际化是一个比较常见的需求,但网上关于这一方面的直接可用的方案却不多,这篇文章主要给大家介绍了关于Vue.js项目前端多语言方案的思路与实践,需要的朋友可以参考下
    2021-07-07
  • vue eslint报错:Component name “xxxxx“ should always be multi-word.eslintvue的4种解决方案

    vue eslint报错:Component name “xxxxx“ should always be 

    新手在使用脚手架时总会报各种错,下面这篇文章主要给大家介绍了关于vue eslint报错:Component name “xxxxx“ should always be multi-word.eslintvue的4种解决方案,需要的朋友可以参考下
    2022-07-07
  • vue中radio根据动态值绑定checked无效的解决

    vue中radio根据动态值绑定checked无效的解决

    这篇文章主要介绍了vue中radio根据动态值绑定checked无效的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论