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 ...
随机推荐
- [daily] cscope
手册: http://cscope.sourceforge.net/cscope_vim_tutorial.html 下载 cscope_maps.vim 到 $HOME/.vim/plugin/ 目 ...
- ionic3 添加多个自定义组件
往往我们创建自定义组件一般都不止只会创建一个自定义组件,创建多个方式如下. 1.创建自定义组件 ionic g component select-car-no ionic g component ae ...
- CF1139D Steps to One
题目链接:洛谷 这个公式可真是个好东西.(哪位大佬知道它叫什么名字的?) 如果$X$恒$\geq 0$,那么 $$E[X]=\int_0^{+\infty}P(X>t)dt$$ 呸,我什么都没写 ...
- 包的初识和进阶&异常处理
包 包是一种通过使用‘.模块名’来组织python模块名称空间的方式. 1. 无论是import形式还是from...import形式,凡是在导入语句中(而不是在使用时)遇到带点的,都要第一时间提高警 ...
- spring框架学习之--数据库操作增删改查
基于spring的NamedParameterJdbcTemplate操作数据库 首先在 resources 文件夹下添加数据库配置文件jdbc.properties 配置常用的数据库信息 consu ...
- xcode 10 模拟器报错
xcode 10(也可能是任意版本)run 模拟器时,发现会报下面的错误. This app could not be installed at this time.Could not access ...
- 【QT】Installer requires Xcode Version 5.0.0 for Qt download if toolchain not found
When I install QT in MacOS 11.3.6, it prompts I need to install xcode then I install xcode but it wa ...
- 安装rosetta2016时出现git@172.16.25.11s password: \r\nPermission denied错误,解决方法。
当在source目录执行 ./external/scons-local/scons.py -j8 mode=release bin 时,报错 git@.11s password: \r\nPermis ...
- 后台发送get请求
第一步:编写Controller,让后台去请求接口 package controller; import java.util.List; import org.springframework.bean ...
- windows10中修改环境变量的正确姿势
提到修改环境变量,我们可能自然而然想到:右键This PC->Properties->Advanced System Settings->Environment Variables ...