vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目。这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件。
但是后来发现他们的公司组织结构不是都请求的同一个接口,于是想着组件里面给加个url参数就可以了。但是他们的人员说一些参数数据都不同,
非要我在请求接口时在每个页面的父组件分别调用。我想着你们不觉得麻烦我也OK啦。然后就遇到了需要在父组件调用子组件方法的问题。
tree组件有个load 方法,我们要做的是在父组件能调用这个方法,并将他的默认参数node和resolve传过去
<el-tree
v-show="isShowTree"
class="bgClFFF treeBox"
ref="selectTree"
:data="treeData"
node-key="label"
accordion
:props="defaultProps"
@node-click="handleNodeClick"
:expand-on-click-node="false"
lazy
:load="loadNodeChild"
:render-content="renderContent"
></el-tree>
解决的方法如下:
子组件props里定义一个方法,用于接受父组件传过来的方法
props: {
loadNode: {
type: Function,
default: ""
},
}
methods里子组件触发加载数据方法时,调用父组件的方法,并将参数传过去
// 父组件调用
然后在父组件的methods里调用这个方法
vue 父组件调用子组件内置方法的更多相关文章
- vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- Vue 父组件调用子组件的方法
qwq 前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- Vue3 父组件调用子组件的方法
Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...
- react 父组件调用子组件方法
import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...
- 父组件调用子组件 viewChild
父组件调用子组件 1.在子组件的ts中声明一个变量 public lineout:any="你好,我是被父组件调用的子组件"; 2.在父组件的html中写入 (引入子组件) & ...
- React 父组件调用子组件的方法
父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...
随机推荐
- 2019年5款你必须知道的顶级ASO优化工具
仅仅几年前,品牌一直在挣扎着进入顶级榜单的时候.但随着时代的变迁,以及技术承担着市场的每一个噱头,一切都发生了变化,包括市场的传播,消费者行为和品牌影响.今天,品牌不仅仅局限于广告和促销,而且品牌的影 ...
- [dev] udp socket的read长度问题
场景描述 我的两个程序需要彼此通信.采用unix socket来实现. 并为了简单起见使用了DGRAM,也就是udp通信. 问题描述 1. 用法是这样的 收包的一端使用epoll监听,发包端发送一个2 ...
- VUE组件间数据方法的传递,初步了解
父组件的数据传递到子组件: 子组件:(其中fMsg是要从父组件传递过来的数据,注意fMsg要在子组件props里先定义) 父组件:(使用v-bind,将自身数据绑定给中转属性fMsg,从而通过 子组件 ...
- APICloud · 跨越2018,技术改变世界
在APICloud发展轨迹中, 2018注定是疾速的一年, 更多的风口趋势和现象级应用背后, 是技术在推动着世界的加速转动. APICloud所提供的技术服务,在混合之力的驱动下不断完善升级,“让你的 ...
- 截取字段split
172.0.0.1String[] splitAddress=qip.split("\\.");//--172001 String ip=splitAddress[0]+" ...
- 在linux环境下部署禅道环境
下载禅道安装包: 1)cd /home/ 2)mkdir app 3)ls 4)cd app/ 5)pwd 6)wget +禅道地址(http://dl.cnezsoft.com/zentao/9.8 ...
- 解读socketserver源码
解读python中SocketServer源码 再看继承 真正的大餐来之前,还是来点儿开胃菜!回顾一下关于类的继承的知识: 我们先看上面的代码,这是一个简单的类继承,我们可以看到父类Base和子 ...
- asp.net 使用rabbitmq事例
本例asp.net 使用rabbitmq需求背景:为了提升用户体验,用户点击下单按钮,后台先做一些简单必要的操作,返回给用户一个友好提示(比如提示处理中,或者订单状态为处理中),然后发通过发消息给队列 ...
- mysql扩展性架构实践N库到2N 库的扩容,2变4、4变8
mysql扩展性架构实践N库到2N 库的扩容,2变4.4变8 http://geek.csdn.net/news/detail/5207058同城 沈剑 http://www.99cankao.com ...
- JSP页面、包含
JSP页面概念: html称为静态页面,而与相对的JSP称为动态页面(一个特殊的servlet)二者的区别在于,html只能定义css,js.但是在JSP中除了html可以定义的文件外,还可以定义Ja ...