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

相关推荐

  • 详解vue.js2.0父组件点击触发子组件方法

    之前关于vue.js2.0父组件的一点学习,最近需要回顾,就顺便发到随笔上了 <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementTotal"></button-counter> <button-counter v-on:ee="increment

  • 详解vue2父组件传递props异步数据到子组件的问题

    测试环境:vue v2.3.3, vue v2.3.1 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-data="asyncData"></child> </div> </template> <script> import child from './child' export de

  • Vue2.x中的父组件传递数据至子组件的方法

    Vue2.x中的父组件传递数据至子组件的方法

    父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-girl-group> </div> </template> script <script> import vGirlGroup from './GirlGroup' export default { name: 'girl', components: { vGirlGro

  • vue父组件通过props如何向子组件传递方法详解

    前言 本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: vue 组件中的 this vue 中 data/computed/methods 中 this的上下文是vue实例,需注意. 例如: 注意:不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }} ) .理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例

  • vue的props实现子组件随父组件一起变化

    本文实例为大家分享了vue的props实现父组件变化子组件一起变化,供大家参考,具体内容如下 类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 绑定动态 Props 到父组件的数据.每当父组件的数据变化时,也会传导给子组件: <div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></c

  • vue父组件向子组件动态传值的两种方法

    在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种, 方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组   父组件: <uploadImg :width="200" :height="200" name="productImage" size=&qu

  • vue父组件中获取子组件中的数据(实例讲解)

    如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo

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

    有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref=&

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

    有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref=&

  • ES6下子组件调用父组件的方法(推荐)

    出于某些目的,最近又开始研究起了RN,看着教程一步步的学习,在最近却是碰到了一个问题,那就是父子组件的方法调用的问题. 这个问题我百度了很久,JS的ES6语法下,用class创建组件,子组件调用父组件方法模拟器不断报错. 因为我看的视频是基于es5的语法来实现的代码,所以语法有些不同. es5的语法下,方法的this都是RN已经帮我们处理好了的,所以按照视频中的示例是可以达成效果的,但是es6貌似是要自己写的.. 具体的写法就是在constructor中添加 this.xxxxx = this.

  • vue3.0 子组件如何修改父组件传递过来的值

    目录 子组件修改父组件传递过来的值 使用toRefs进行解决 子组件向父组件传值emit的使用注意事项 子组件的写法 父组件使用 子组件修改父组件传递过来的值 vue 的子组件 不是 不能直接更改父组件的值,需要将props 的值 给到子组件,后再修改, 否则:Unexpected mutation of “props” prop. vue3提供了一个解决:toRefs:https://v3.cn.vuejs.org/api/refs-api.html#torefs toRefs 非常有用,这样

  • Vue子组件调用父组件方法案例详解

    一.直接在子组件中通过this.$parent.event来调用父组件的方法 <!-- 父组件 --> <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: {

  • vue slot 在子组件中显示父组件传递的模板

    父组件使用没有指定slot属性,默认为default 在slot中可以使用默认值,如果父组件没有传递对应的slot,则会显示默认值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body&

  • vue子组件如何使用父组件传过来的值

    目录 子组件使用父组件传过来的值 父组件 子组件 vue子组件调用父组件数据 子组件使用父组件传过来的值 父组件 <alarmstatistics :roless.sync="role"></alarmstatistics>   import alarmstatistics from "./alarmstatistics.vue";   components: {     alarmstatistics,   }, 子组件   props:

  • vue.js 子组件无法获取父组件store值的解决方式

    子组件: props:['myDetail'] 父组件: <子组件 :myDetail="detail"></子组件> computed:{ detail(){ return this.$store.state.XXXX.yyyy } } 子组件的参数值不会随着父组件store中参数值的改变而改变 修改为 父组件: data:{ detail:{} } methods:{ reloadDetail(){ this.detail=JSON.parse(JSON.s

  • angular5 子组件监听父组件传入值的变化方法

    项目中遇到一个问题,就是在ngInit()中调用方法,只调用一次的问题,当父组件传值变化时,并不会再次执行. import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'cs-img-lazy', templateUrl: 'cs-img-lazy.html' })

  • Vue中子组件调用父组件的3种方法实例

    目录 1.直接在子组件中通过“this.$parent.event”来调用父组件的方法. 2.子组件用“$emit”向父组件触发一个事件,父组件监听这个事件即可. 3.父组件把方法传入子组件中,在子组件里直接调用这个方法即可. 总结 Vue中子组件调用父组件的三种方法: 1.直接在子组件中通过“this.$parent.event”来调用父组件的方法. 父组件 <template> <div> <child></child> </div> <

随机推荐