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 ...
随机推荐
- 虚拟机下hadoop1.1.2安装(单机版)与(集群版)
(1)我的电脑环境 CentOS6.5,64位,在虚拟机下实现. (2)jdk1.6的安装 jdk我用的是1.6.0_27,自己在网上下载jdk-6u27-linux-x64.zip 先在/usr/l ...
- 关于javascript中的变量对象和活动对象
https://segmentfault.com/a/1190000010339180 https://zhuanlan.zhihu.com/p/26011572 https://www.cnblog ...
- 自学stm32的一些个人经验
1.首先我们先看看与STM32相关的文档 我们假定大家已经对STM32的书籍或者文档有一定的理解.如不理解,请立即阅读STM32的文档,以获取最基本的知识点. 如果你手上拥有ST官方主推的STM32神 ...
- 跨界!Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日
https://mp.weixin.qq.com/s/z5qm-2bHk_BCJAwaodrMIg 跨界!Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日
- linux上创建svn服务器(centos7.3)
1.安装svn yum -y install subversion 2.创建svn版本仓库 mkdir /var/svn/svnrepos svnadmin create /var/svn/svnre ...
- Python004-数据处理示例:以某个数据(字段)为基准从数据中获取不同的字段行数
数据源样式如下所示: 需求: 读取文本,以第一列为基准参考系,每个基准仅输出满足需要条数的数据:不满足,全部输出. 比如,基准为 6236683970000018780,输出条数要求为 5.若文本中含 ...
- node js 爬虫爬取静态页面,
先打一个简单的通用框子 //根据爬取网页的协议 引入对应的协议, http||https var http = require('https'); //引入cheerio 简单点讲就是node中的jq ...
- instrument 之 core animation
1.Color Blended Layers 图层混合 需要消耗一定的GPU资源,避免设置alpha小于1,省去不必要的运算 2.Color Hits Green and Misses Red 光栅化 ...
- PHP jsonp ajax 跨域 实例
HTML代码 <html> <head> <title>跨域测试</title> <script src="http://code.jq ...
- 安全相关及HttpClient
1,Spring Security入门示例 Spring Security Annotation Configuration Example – HelloWorld 2,程序模块Get请求,获取响应 ...