elementUI子组件传值到父组件

原创 已于 2024-07-05 09:11:39 修改 · 298 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #elementui

于 2023-10-17 21:34:45 首次发布
本文描述了如何使用ElementUI实现子组件树节点的点击事件，通过`node-click`方法将子组件的id传给父组件，并在旁边表格中显示和编辑数据，详细展示了子组件与父组件之间的数据通信过程。

elementUI子组件传值到父组件

在这里插入图片描述

需求完成点击树的子节点,在旁边表格上显示出节点数据,并可以修改的需求.
这时需要子组件树种的id传到表格里面,这时需要node-click的方法
在这里插入图片描述
下面展示我写的完整版
在这里插入图片描述
在这里插入图片描述
子组件里面的所有方法.注意 tree-click下面是有用的
在这里插入图片描述
在父组件里面注册子组件,
在这里插入图片描述
在父组件里面注册
在这里插入图片描述
注意"tree-click"在子组件里面写一样的值
在这里插入图片描述
在这里就可以获取到子组件点击的值了
在这里插入图片描述
OK现在就完成了子组件向父组件传值的需求了

wangxu__wangxu
关注
vue自定义子组件，并分享使用不同方法进行父子组件传值（最全整合，含实例）
向宇
12-28 1179
在 Vue 中，父子组件之间的传值有多种方式，不同的方式适应不同的场景。下面是 Vue 中父子组件传值的几种常见办法，以及每种方式的详细实例。方法适用场景优点props父组件向子组件传递数据简单、直观、符合单向数据流$emit子组件向父组件传递数据简单、直观、父子组件数据流通的标准方式v-model实现父子组件双向绑定数据简化双向绑定操作祖先组件与后代组件传值（跨级）跨级传值，避免多层组件传值的繁琐Vuex多个组件之间共享数据，跨组件传值适用于大型应用，集中管理状态，方便维护。
VUE 学习——父组件传值给子组件
jz_say的博客
03-02 3282
在我们编写前端代码时，经常遇到的一种场景，子组件需要使用父组件的值，这种情况下，我们可以使用props帮助我们进行父子组件间的通信。这里我们先模拟一个场景，展示如何使用。 场景：在父组件修改值，传递给子组件，子组件进行显示，如下图所示。 实现： ...
ElementUI表单组件，传值，索引传值；组件传值；自动表单校验；多选框组件；选择器组件；；
m0_49194578的博客
05-23 3602
<el-table :key="tableKey" v-loading="listLoading" #决定列表是否处于加载状态的boolean值 :data="list" #数据绑定参数 border #是否有界限 fit highlight-current-row style="width: 100%;" # 宽度 @sort-change="sortChange" # 排序改变时触发的回调 > 在这个标签内的元素就可以使用ro.
vue element ui 子组件向父组件传值
大内密探零零漆
05-23 3639
写项目碰到弹窗（子组件）向他的父组件传值，具体如下： 父组件： <Zjhinfo v-if="ZjhinfoVisible" ref="Zjhinfo" @tellFatherName="getMySonName"></Zjhinfo> //子组件向父组件传值 getMySonName(data) { this.dataForm.zjh = da...
element子组件向父组件传值
qq_40787608的博客
06-20 1540
element子组件向父组件传值
ElementUI Dialog 对话框,组件之间传值
热门推荐
shykevin的博客
01-15 1万+
一、概述 在保留当前页面状态的情况下，告知用户并承载相关操作。 二、自定义内容 Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。 <!-- Table --> <el-button type="text" @click="dialogTableVisible = true">打开...
【子组件和父组件相互传值】el-dialog
努力的搬砖人
01-09 1613
子父组件相互传值
vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。...
05-25
1. 父组件向子组件传值： 在父组件中使用子组件时，可以通过在子组件标签中使用属性绑定的方式将数据传递给子组件。例如： ```html <child-component :prop-name="parentData"></child-component> import ...
elementui子组件表单对话框和父组件表格数据实战交互
qq_45163356的博客
11-23 1207
工作业务： 父组件表格显示，新增编辑按钮弹出子组件对话框进行数据操作
使用elementUI和vue2版本，子组件多选组件选中后传值给父组件，写个简单的demo
最新发布
04-09
然后，用户的问题是关于父子组件传值的，Vue2中常用的方法是通过事件触发，子组件$emit事件，父组件监听这个事件并处理数据。 接下来，我需要确认用户提到的子组件如何将选中的值传递给父组件。根据用户提供的引用...
Vue+elementUI+sortableJS实现父/子组件值传递及el-table表格行拖拽
无
01-30 1806
Vue+elementUI+sortableJS实现父/子组件值传递及el-table表格行拖拽
031：vue子组件向父组件传递多个参数，父组件2种解析方法
大剑师兰特的GIS世界
09-11 1189
vue子组件使用$emit向父组件传值时，可以传递一个参数，也可以传递多个参数，那么父组件如何设置来获取到子组件传来的数据呢？ 这里面有两种方法，具体的参考如下信息介绍。
elementui中父组件调用子组件的子组件方法并且传值
m0_59168984的博客
04-24 957
elementui中父组件调用子组件的子组件方法并且传值
vue 父传子 子传父 （element-ui Dialog 点击展开按钮在父组件，弹框在子组件案列）
YWW_ABC的博客
07-20 2822
vue父传子 子传父（element-uiDialog点击展开按钮在父组件，弹框在子组件案列）
实战 | Element UI 父子组件传值与事件绑定（正向）
mySoul
08-27 1653
这是小小的本周的第三篇，本篇将会讲解关于Element UI 父子组件传值与事件绑定。父子组件传值新建父组件和子组件新建父组件代码如下<template> <div...
基于Vue的ElementUI项目实现父子组件信息传递
lovoo的博客
06-19 1694
前言 如项目中有一个产品分类的树形组件，在分类属性组件中引入之后，要实现点击左侧的树节点，更新右端的表格，这种功能如何实现呢？ 如图： 1、子组件： 1.1、在el-tree节点上加上 @node-click="nodeClick" 1.2、实现方法中使用this.$emit进行数据提交， nodeClick(data, node, component){ //向父组件发送数据请求 console.log(data, node, component) this.$e
在 Element-UI 组件的事件中传递自定义参数
无解的菜鸟晖 的博客
12-23 7737
以 Element-UI 分页组件的完整功能为例 官方文档组件实例的代码如下： <template> <div class="block"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-sizes="[100, 20
element ui 父子传值 对象_「Vue学习记录三」组件之间传值
weixin_39912250的博客
11-23 989
提示：可先学习了解组件的基础知识 组件基础1.父组件向子组件传值 props 父组件嵌套的子组件中，使用v-bind:msg=‘xxxx’进行对象的绑定，子组件中通过定义props接收对应的msg对象子组件 Children.vue<template> <div id="children"> <h2>子组件</h2> ...
实战 | Element UI 父子组件传值与事件绑定（逆向）
mySoul
08-28 946
这是小小本周的第四篇，本篇将会倒过来讲解Element UI 父子组件传值与事件绑定。父子组件传值新建父组件和子组件新建父组件代码如下<template> <div...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值