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父组件获取子组件的值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于axios 的responseType类型的设置方法

    基于axios 的responseType类型的设置方法

    今天小编就为大家分享一篇基于axios 的responseType类型的设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能

    使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能

    在网站中普遍会遇到这样的需求,路由跳转前做一些验证,比如登录验证(未登录去登录页)。下面脚本之家小编给大家带来了使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能,感兴趣的朋友一起看看吧
    2018-03-03
  • Vite内网ip访问2种配置方式

    Vite内网ip访问2种配置方式

    这篇文章主要给大家介绍了关于Vite内网ip访问的2种配置方式,文中通过实例代码介绍的非常详细,对大家学习或者使用Vite具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • Vue+Element ui实现树形控件右键菜单

    Vue+Element ui实现树形控件右键菜单

    这篇文章主要为大家详细介绍了Vue+Element ui实现树形控件右键菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue-cli-service不是内部或外部命令,也不是可运行的程序或批处理文件问题

    vue-cli-service不是内部或外部命令,也不是可运行的程序或批处理文件问题

    在Vue项目构建过程中,如果遇到无法识别'vue-cli-service'命令的错误提示,通常是因为没有全局安装vue-cli,解决这个问题的步骤主要包括:首先检查Vue版本,如果未安装则先安装Vue;其次全局安装vue-cli;若在安装过程中遇到cnpm命令找不到的情况
    2024-10-10
  • Vue为什么要谨慎使用$attrs与$listeners

    Vue为什么要谨慎使用$attrs与$listeners

    这篇文章主要介绍了Vue为什么要谨慎使用$attrs与$listeners,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • Vue编译器解析compile源码解析

    Vue编译器解析compile源码解析

    这篇文章主要为大家介绍了Vue编译器解析compile源码解析示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue.js中v-for指令的用法介绍

    Vue.js中v-for指令的用法介绍

    这篇文章介绍了Vue.js中v-for指令的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • 简单学习vue指令directive

    简单学习vue指令directive

    这篇文章主要和大家一起简单学习一下vue指令:directive,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • element表格el-table实现虚拟滚动解决卡顿问题

    element表格el-table实现虚拟滚动解决卡顿问题

    当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,本文主要介绍了element表格el-table实现虚拟滚动解决卡顿问题,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10

最新评论