vuejs父组件获取子组件内容，不通过$emit

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/flting1017/article/details/84840001

vuejs当中，一般父组件获取子组件内容都是子组件使用$emit传值给父组件，而且需要点击方法去触发$emit，但是有时候需求是没有方法触发，但是也想获取子组件的内容，这时候需要用到的方法就是$ref实例。今天记录的是通过$ref实例来获取子组件内容

在下图中，产品信息和仓库物流信息是子组件，提交按钮和取消按钮是在父组件里面的，html类似以下写法

<div>

<!-- 产品 -->

<compProducts :alltype="type" :comProduct="alldatas.products" ref="refproduct"></compProducts>

<!-- 仓库 -->

<compLogistics :alltype="type" :comLogistics="alldatas.logistics" ref="refwarehouse"></compLogistics>

<footer class="bg-fff padding-20 text-right" >

     <Button type="primary" class="width-15per" @click="submit(true)">提交</Button>

     <Button type="primary" class="width-15per" @click="cancel">取消</Button>

</footer>

</div>

 

在子组件当中写上ref对应的值

在提交方法里面打印ref的值，可以拿到子组件里面修改值，不需要方法去触发$emit

submit(){

     let aaa = this.$refs.refrevice

     let bbb = this.$refs.refproduct

     console.log(aaa)

     console.log(bbb)

}

此时打印的值当中里面包含了修改的内容，刚好就是自己需要的