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-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
在网站中普遍会遇到这样的需求,路由跳转前做一些验证,比如登录验证(未登录去登录页)。下面脚本之家小编给大家带来了使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能,感兴趣的朋友一起看看吧2018-03-03
vue-cli-service不是内部或外部命令,也不是可运行的程序或批处理文件问题
在Vue项目构建过程中,如果遇到无法识别'vue-cli-service'命令的错误提示,通常是因为没有全局安装vue-cli,解决这个问题的步骤主要包括:首先检查Vue版本,如果未安装则先安装Vue;其次全局安装vue-cli;若在安装过程中遇到cnpm命令找不到的情况2024-10-10


最新评论