vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue父组件获取子组件的值

vue父组件如何获取子组件的值

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

您可能感兴趣的文章:
阅读全文