Vue3中使用setup监听props

子组件展示父组件传来的参数，展示的信息随着父组件上tab的切换动态更新。

一开始的想法是单独监听这个传递的参数，但看了VUE3的文档之后，似乎对参数的监听必须精确到属性。例如参数为

需要在子组件的watch中写明监听的是name还是gender。

该参数中有很多可能会改变的属性，一一监听过于麻烦。所以改变思路，使用监听props来获取所有所有传参。

在父组件中，用于传递给子组件的参数必须为响应式(eg reactive)，否则子组件在监听时不会监测到变换，watch永远不会生效

immediate是立即开始监听，在页面首次渲染时可能为显示为undefined，如果watch的变化需要手动触发，不需要开启

deep默认开启，可以忽略（参数为reactive，会默认开启deep，如果是ref，则不会默认开启deep）

vue官网中规定， vue中的Prop是单向数据流

在vue中，组件中的Prop是单向绑定的，父组件的Prop的更新会向下流向到子组件中，但是反过来则不行。这样做是为了防止从子组件意外改变父组件的状态，从而导致应用的数据流向难以理解。

如果在子组件中改变父组件的某个Prop值，控制台会发出警告，但是在实际的实践中，我们还是会遇见需要改变父组件Prop的情况。

使用组件时，一开始绑定某Prop的值，在后续交互中，需要根据情况改变父组件中Prop的值，在这种场景下，我们要实现的是类似于数据双向绑定的功能，此时我们可以用到的方法有：

先说问题，父组件利用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异步数据到子组件的问题

您是想问vue移动端怎么取角色值吗？您可以按照以下步骤进行：

1、定义一个角色变量，通常命名为role。

2、在vue组件中，通过props属性将角色值传递给组件。

3、使用computed属性定义一个角色计算属性，用于根据传递的角色值计算当前用户的角色。

4、根据计算属性的值，显示不同的内容或执行不同的 *** 作，来区分不同的用户角色。

原文链接 >

以上就是关于Vue3中使用setup监听props全部的内容，包括:Vue3中使用setup监听props、对vue的props实现双向数据流、解决vue组件props传值对象获取不到的问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！