ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> Javascript教程 >> Vuejs 20 子组件访问/调用父组件的方法示例代码

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

来源:网络整理     时间:2018-02-11     关键词:

本篇文章主要介绍了" Vuejs 20 子组件访问/调用父组件的方法示例代码",主要涉及到方面的内容,对于Javascript教程感兴趣的同学可以参考一下: 有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码:子组件:<template> <div ref="is...

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

子组件:

<template> 
  <div ref="isShowing"> 
    <div ref="scroll_warpper" v-show="!hid_show_switch"> 
      <ul ref="scroll_warpper_ul"> 
        <li @click="goToFatherDetail(233)"> 
        </li> 
      </ul> 
    </div> 
    <v-loading 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>itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/</span> 
      } 
    } 
  }; 
</script> 

父组件:

<template> 
  <div> 
      <div> 
        <div> 
          <router-link to="/isShowing">正在热映</router-link> 
        </div> 
        <div> 
          <router-link to="/willShow">即将上映</router-link> 
        </div> 
      </div> 
    </div> 
    <router-view 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"

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

总结

相关图片

相关文章