脚本之家

电脑版
提示:原网页已由神马搜索转码, 内容由www.jb51.net提供.
您的位置：首页→ 网络编程→ JavaScript→ javascript类库→ vue.js→ vue父组件获取子组件的值

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如何读取外部配置文件
      这篇文章主要介绍了vue如何读取外部配置文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
      2024-03-03
    • 基于vue实现分页/翻页组件paginator示例
      本篇文章主要介绍了基于vue实现分页/翻页组件paginator示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
      2017-03-03
    • vue2中vue.config.js简单配置代理跨域的方法
      在前后端的开发中总是难免会遇到前后端的跨域问题,下面这篇文章主要给大家介绍了关于vue2中vue.config.js简单配置代理跨域的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
      2024-01-01
    • VUE前端导出文件之file-saver插件安装使用教程
      这篇文章主要给大家介绍了关于VUE前端导出文件之file-saver插件安装使用的相关资料,file-saver是一个用于保存文件的JavaScript库,它提供了一种简单的方式来生成和保存文件,支持各种文件类型,例如文本文件、图片、PDF等,需要的朋友可以参考下
      2024-05-05
    • 在Vue中使用Echarts可视化库的完整步骤记录
      这篇文章主要给大家介绍了关于在Vue中使用Echarts可视化库的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
      2020-11-11
    • Vue 2阅读理解之initRender与callHook组件详解
      这篇文章主要为大家介绍了Vue 2阅读理解之initRender与callHook组件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
      2022-08-08
    • vue-cli的工程模板与构建工具详解
      vue-cli提供的脚手架只是一个最基础的，也可以说是Vue团队认为的工程结构的一种最佳实践。这篇文章主要介绍了vue-cli的工程模板与构建工具 ,需要的朋友可以参考下
      2018-09-09
    • Vuex之理解state的用法实例
      本篇文章主要介绍了Vuex之理解state的用法实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
      2017-04-04
    • vue实现大文件分片上传与断点续传到七牛云
      这篇文章介绍了vue实现大文件分片上传与断点续传到七牛云的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
      2022-06-06
    • vue 利用路由守卫判断是否登录的方法
      今天小编就为大家分享一篇vue 利用路由守卫判断是否登录的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
      2018-09-09

    最新评论