vue父组件如何获取子组件的值
更新时间：2024年06月25日 11:04:27 作者：CV猿码人
这篇文章主要介绍了vue父组件如何获取子组件的值,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
子组件被点击时触发@node-click="handleNodeClick"
<el-tree
:data="optionData"
:props="props"
highlight-current
@node-click="handleNodeClick"
>向父级传递值
handleNodeClick (node) {
this.$emit('getval', node)
}父组件
<SelectTree
ref="menuParentTree"
:props="{
value: 'id', // ID字段名
label: 'text', // 显示名称
children: 'children' // 子级字段名
}"
:value="wbsTreeData.name"
:data="wbsTreeData"
@getValue="(value) => {inputForm.parentName=value}"
@getval='testData'
v-on="$listeners"
@node-click="handleNodeClick"
/>有时候需要添加v-on="$listeners"
接收子组件的值
testData (value) {
if (value.type !== '2')
this.$message.warning('请选择分项')
}总结
子 handleNodeClick (node) {
this.$emit('getval', node)
}
父 @getval='testData'
testData (value) {
if (value.type !== '2')
this.$message.warning('请选择分项')
}到此这篇关于vue父组件获取子组件的值的文章就介绍到这了,更多相关vue父组件获取子组件的值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解vue文件中使用echarts.js的两种方式，主要介绍了两种使用方式，一种是以组件的形式另一种直接引入，非常具有实用价值，需要的朋友可以参考下2018-10-10
这篇文章主要介绍了nuxt 页面路由配置,主页轮播组件开发操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家分享了Vue.js第一天的学习笔记，包括数据的双向绑定、常用指令学习,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
本篇文章主要介绍了VueJS事件处理器v-on的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了基于vue与element实现创建试卷相关功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
本文通过实例代码给大家介绍了Vuejs中的watch，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2020-01-01
这篇文章主要介绍了vue如何实现接口统一管理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法
今天就好好说说vue-cli5.0种使用copy-webpack-plugin插件该如何配置的问题。这里我们安装的 copy-webpack-plugin 的版本是 ^11.0.0，感兴趣的朋友一起看看吧2022-06-06
这篇文章主要介绍了pc端vue 滚动到底部翻页效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue实现超过两行显示展开收起的代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论