vue---父组件监听子组件并获取子组件的值（子组件多个值）

script：

// changeName:子组件watch的 this$emit('changeName', thisprovince)的changeName，是自定义的

// lockValue：父组件的方法名

阅读element-ui源码，发现在设计子组时件用到了 inject 属性，随即查了一下 官方文档 ，得知vue在220版本里新增了 provide / inject ：

按照文档的描述，我的理解是：在多级嵌套的组件体系中，某级外层组件可以通过 provide 属性向其下任意一级子组件提供一个依赖，不管层级有多深；而某级子组件则可以通过 inject 属性接收来自其上任意一级父组件提供的依赖（通过 thisxxx 形式获取）。注意： provide 和 inject 需要一起使用。

举个例子说明：

清朝三位皇帝：康熙（玄烨）、雍正（胤禛）、乾隆（弘历）是祖孙三代，我们用vue组件的思想表示他们之间的关系，并模拟他们的一段对话，以此理解vue中的 provide 和 inject 。

调用组件——大清帝国：qing-dynastyvue

定义爷爷组件——康熙皇帝：kangxivue

定义儿子组件——雍正皇帝：yongzhengvue

定义孙子组件——乾隆：qianlongvue

vue3已经推出很久了，相信大家也都体验过了，变化很大，尤其是composition Api的出现，而且对typescript的支持更好了，但是写惯了vue2的我，在使用setup的时候，碰到了一个问题：setup里面没有this，而且废除了$children，那么我要如何获取当前组件的实例和获取当前组件的子组件？？

本文创建两个演示示例组件：Parentvue、Children,vue

一、获取当前组件

vue3提供了一个getCurrentInstance方法用来获取当前组件的实例

来看页面

控制台中打印出的对象就是当前组件的实例，拿到这个实例对象之后就能调用里面的方法，比如parent，props等数据，这个就是一个方法的事儿

一、获取当前组件的子组件实例

先来看看vue3官网对$children的说明

意思就是说推荐我们使用ref对子组件进行绑定，然后访问子组件

在Childrenvue中家点东西

父组件注册Children

然后就能看到子组件的内容了

下面就通过ref来绑定子组件，要在vue中引入ref。需要注意的是setup的执行是早于mounted，甚至早于created生命周期的，所以通过ref绑定成功之后需要在mounted生命周期才能访问到你绑定的子组件的

调用子组件的方法

setup的第二个参数上有一个expose 属性，这是vue32+才出现的内容，通过expose 可以将该组件内部的一些方法等对外进行暴露

然后父组件通过ref绑定子组件之后，就可以调用子组件暴露出来的setCounter函数了

再来看一个例子

假如有这么一个需求，需要你将Children以插槽的方式传进Parent组件，

并且Parent组件内部要对插槽的内容进行校验，必须是Children组件。再创建一个testvue

需求的意思就是Parent组件内部要进行校验，总不可能将Parent内部的直接子元素一一绑定ref吧？这样太过冗余，如果传入了上百个Children组件呢？更麻烦了。

所以还是要来说说setup的参数了,setup第二个参数context上有一个属性slots，slots上又有一个方法default，该方法的返回值就是一个插槽内容的数组

接下来在Parentvue中导入Children组件，并在testvue的Parent组件中添加一个div

然后Parent组件内部进行判断

以上就是关于vue---父组件监听子组件并获取子组件的值（子组件多个值）全部的内容，包括:vue---父组件监听子组件并获取子组件的值（子组件多个值）、vue中的provide和inject、vue3没了$children，如何获取子组件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！