vue3没了$children，如何获取子组件

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组件内部进行判断

关键点：通过:id="getId(info)"将info属性(props)值传递到方法，然后再设置值，网上的watch方法试了无效，这个方法实测有效

源码如下：

<page v-bind:info="paginationVo" ></page>

// 注册 - 名字不能大写 分页组件<page v-bind:info="paginationVo" ></page>

Vuecomponent('page', {

// 声明 属性

props: ['info'],

template: '<ul :id="getId(info)" class="c_page"><li v-if="isShowPreBtn"><button v-on:click="btnHandler(-1)">上一页</button></li><li v-if="isShowNextBtn"><button v-on:click="btnHandler(-2)" >下一页</button></li></ul>',

data: function() {

return {

counter: 0,

paginationVo:{},

isShowPreBtn:false,

isShowNextBtn:false,

}

},

mounted() {

consolelog("-------mounted:"+JSONstringify(thispaginationVo));

这个官网很清楚，也很简单，父组件中使用v-bind绑定传送，子组件使用props接收即可

例如：

父组件中：

子组件中:

这种情况下，子组件的methods中想要取到props中的值，直接使用thischartData即可

但是有写情况下，你的chartData里面的值并不是固定的，而是动态获取的，这种情况下，你会发现methods中是取不到你的chartData的，或者取到的一直是默认值

比如下面这个情况:

父组件中:

此时子组件的methods中使用thischartData会发现是不存在的(因为为空了)

这情况我是使用watch处理

监听chartData的值，当它由空转变时就会触发，这时候就能取到了，拿到值后要做的处理方法也需要在watch里面执行

先说问题，父组件利用props向子组件传值，浏览器

console

有这个值，但是获取不到内部的属性，困了我3个小时，真的

personal

console

以下为原代码

1、homevue（父组件）--personal是被传的参数

<!--子组件-->

<form-picker

class="form-picker"

:personal="personal"

>

</form-picker>

export

default

{

data(){

return{

personal:{

state:'',////判断是修改状态，还是新增状态

add/edit

data:[]

}

}

},

mounted(){

this$apipersonalsearchPersonalInfo(thisuserInfouserId)then((res)=>{

thispersonaldata

=

resdatadata

//这里给personal对象赋值接口传来的数据

})

},

}

2、formPicker

（子组件）

--接收personal

export

default

{

props:['active','personal'],

mounted(){

consolelog(149,thispersonal)

consolelog(150,thispersonalstate)

}

}

运行结果

明明149行有

state

值，150行输出却没有了,是不是超级奇怪

后面经过大佬的讲解，其实浏览器consolelog也是应该没有的

所以，其实我们子组件一开始根本就没有取到这个personal这个对象。

3、解决方法--使用watch

父组件

export

default

{

data(){

return{

personal:{

state:'',////判断是修改状态，还是新增状态

add/edit

data:[]

}

}

},

mounted(){

this$apipersonalsearchPersonalInfo(thisuserInfouserId)then((res)=>{

//thispersonaldata

=

resdatadata

//这里给personal对象赋值接口传来的数据

//使用以下方法重新赋值，上面方法watch监听不到，具体什么原因，我也不清楚，知道的告知我！谢谢

thispersonal

=

{

data:

resdatadata,

state:

'edit'

}

})

},

}

接下来子组件就能

watch

到

personal

了

子组件

watch:{

personal(newValue,oldValue){

consolelog(181,newValue)

},

/

输出

{

data:

resdatadata,

state:

'edit'

}

/

}

总结

以上所述是小编给大家介绍的解决vue组件props传值对象获取不到的问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:vue20

子组件改变props值,并向父组件传值的方法详解vue父子组件间传值(props)vue之父子组件间通信实例讲解(props、$ref、$emit)vue组件中使用props传递数据的实例详解vue父组件向子组件(props)传递数据的方法vue父组件通过props如何向子组件传递方法详解详解vue2父组件传递props异步数据到子组件的问题

在Vue3中，父组件可通过创建一个ref(null)，然后将赋值的元素写在当前子组件上即可，在需要的时候，通过定义的响应式变量即可获取，获取后即可取得当前子组件内部dom以及当前子组件内部变量方法等，并且直接使用子组件内部方法。但是有时候获取的时候返回的没有什么信息只有一个 {_v_skin:true} 这个信息，这条信息表示数据无法响应。

此时childDomvalue的值为{_v_skin:true}无法获取子组件内部信息

此时父组件即可获取子组件内部变量与方法与当前dom等信息

VueX 是适用于在 Vue 项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步 data 中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此， Vue 为这些被多个组件频繁使用的值提供了一个统一管理的工具—— VueX 。在具有 VueX 的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

由于 VueX 是在学习 VueCli 后进行的，所以在下文出现的项目的目录请参照 VueCli 2x 构建的目录。

以下步骤的前提是你已经完成了Vue项目构建，并且已转至该项目的文件目录下。

打开mainjs

例如在Appvue中，我们要将state中定义的name拿来在h1标签中显示

或者要在组件方法中使用

注意，请不要在此处更改 state 中的状态的值，后文中将会说明

在Vue项目开发中，需要监控项目中得各种值，为了提高效率，Vue提供了一款浏览器扩展——VueDevtools。

在学习VueX时，更为需要使用该插件。关于该插件的使用可以移步官网，在此不再赘叙。

在VueX对象中，其实不止有 state ,还有用来 *** 作 state 中数据的方法集，以及当我们需要对 state 中的数据需要加工的方法集等等成员。

成员列表：

首先， Vue 组件如果调用某个 VueX 的方法过程中需要向后端请求时或者说出现异步 *** 作时，需要 dispatch VueX中 actions 的方法，以保证数据的同步。可以说， action 的存在就是为了让 mutations 中的方法能在异步 *** 作中起作用。

如果没有异步 *** 作，那么我们就可以直接在组件内提交状态中的 Mutations 中自己编写的方法来达成对 state 成员的 *** 作。注意， 133节 中有提到，不建议在组件中直接对 state 中的成员进行 *** 作，这是因为直接修改(例如： this$storestatename = 'hello' )的话不能被 VueDevtools 所监控到。

最后被修改后的state成员会被渲染到组件的原位置当中去。

mutations 是 *** 作 state 数据的方法的集合，比如对该数据的修改、增加、删除等等。

mutations 方法都有默认的形参：

( [state] [,payload] )

例如，我们编写一个方法，当被执行时，能把下例中的name值修改为 "jack" ,我们只需要这样做

indexjs

而在组件中，我们需要这样去调用这个 mutation ——例如在Appvue的某个 method 中:

在实际生产过程中，会遇到需要在提交某个 mutation 时需要携带一些参数给方法使用。

单个值提交时:

当需要多参提交时，推荐把他们放在一个对象中来提交:

接收挂载的参数：

另一种提交方式

为了配合Vue的响应式数据，我们在Mutations的方法中，应当使用Vue提供的方法来进行 *** 作。如果使用 delete 或者 xxxx = xx 的形式去删或增，则Vue不能对数据进行实时响应。

可以对state中的成员加工后传递给外界

Getters中的方法有两个默认参数

例如

组件中调用

由于直接在 mutation 方法中进行异步 *** 作，将会引起数据失效。所以提供了Actions来专门进行异步 *** 作，最终提交 mutation 方法。

Actions 中的方法有两个默认参数

例如，我们在两秒中后执行 222 节中的 edit 方法

由于 setTimeout 是异步 *** 作，所以需要使用 actions

在组件中调用:

改进:

由于是异步 *** 作，所以我们可以为我们的异步 *** 作封装为一个 Promise 对象

当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成 模块（module） 。每个模块拥有自己的 state、mutation、action、getter 、甚至是嵌套子模块——从上至下进行同样方式的分割。

组件内调用模块a的状态：

而提交或者 dispatch 某个方法和以前一样,会自动执行所有模块内的对应 type 的方法：

如果把整个 store 都放在 indexjs 中是不合理的，所以需要拆分。比较合适的目录格式如下：

对应的内容存放在对应的文件中，和以前一样，在 indexjs 中存放并导出 store 。 state 中的数据尽量放在 indexjs 中。而 modules 中的 Astore 局部模块状态如果多的话也可以进行细分。

前面讲过通过props子组件很容易就可以获取到父组件的数据，但是父组件怎么获取子组件的数据呢？通过查资料，发现可以通过自定义事件来实现父组件与子组件之间的通信。

首先，得创建一个子组件模板文件，子组件在父组件中用的时候，总得有个触发动作可以获取到子组件的数据吧，所以，加个按钮，触发个动作。如下所示：

Appvue

以上就是关于vue3没了$children，如何获取子组件全部的内容，包括:vue3没了$children，如何获取子组件、vue 全局组件component 获取props值、vue中子组件的methods中获取到props中的值方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！