vue 父组件调用子组件方法(适用于上拉加载loading开关的控制)
2018-12-05 15:21
1041 查看
1.父组件部分
<template> <div> <!-- :on-child-fun大写需要拆成 - 的形式,使用大写报错 --> <v-child :on-child-fun="onChildFun"></v-child> </div> </template> <script> import child from './child' export default { components:{ 'v-child' : child }, methods:{ onChildFun(done){ //将子组件方法当做参数在父组件使用 console.log(done) //done() 使用方法 } } } </script>
2.子组件部分
<template> <div> <button @click="childBtn">我是组子组件,将方法传给父组件</button> </div> </template> <script> export default { props: { onChildFun: { type: Function, required: false } }, methods:{ childBtn(){ this.onChildFun(this.chilidFunction) }, chilidFunction(){ this.loading = false } } } </script>
3.打印结果:
在实际的应用中,子组件点击执行应该换成页面滚动到底部执行
子组件部分实际使用思路
//滚动条距离页面顶部距离 + 滚动条高度 > 页面高度 (这样就表示页面到底部了) if(scrollTop + scrollHeight > innerHeight ){ this.loading = true //loading显示 this.onChildFun(this.chilidFunction) //将关闭loading的方法传给父组件 } chilidFunction(){ this.loading = false }
父组件实际使用思路
onChildFun(done){ setTimeOut(()=>{ this.getData()//获取新的数据 done() //loading关闭 },800) //800是控制loading的显示时间 }
相关文章推荐
- vue实现图片加载完成前的loading组件方法
- Delphi 一种简单的二进制校验方法,适用于简单的权限管理或开关控制
- vue-cli监听组件加载完成的方法
- vue 父组件调用子组件方法解决方案
- vue关于父组件调用子组件的方法
- 详解Vue组件插槽的使用以及调用组件内的方法
- vue 子组件调用父组件方法
- jquery加载单文件vue组件的方法
- vue关于父组件调用子组件的方法
- Vue兄弟组件之间如何调用对方的方法
- vue中子组件调用兄弟组件方法
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
- 使用COM或者OLE的方法调用来控制Excel或者其他Office组件
- JavaScript控制图片加载完成后调用回调函数的方法
- vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
- vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用
- vue中父组件调用子组件的方法和属性
- vue,父组件调用子组件方法
- vue中子组件调用兄弟组件方法
- Vue 子组件的异步加载及其生命周期控制