props传值实时更新
时间: 2023-08-17 17:10:44 浏览: 52
在Vue中,props传值默认是单向的,即父组件向子组件传递的值只会在初始化时传递一次,不会实时更新。但是我们可以通过使用watch或者ref来实现props传值的实时更新。
方式1:利用watch监听props变化。在子组件中使用watch来监听props的变化,当props的值发生变化时,可以在watch的回调函数中更新子组件的相关数据。例如:
```javascript
props: {
params: {
type: String,
default: '',
required: true
}
},
data() {
return {
xxx: ''
}
},
watch: {
params(curVal, oldVal) {
if (curVal) {
this.xxx = curVal;
}
}
}
```
方式2:利用ref获取子组件,调用子组件的方法将值传递过去。在父组件中,可以通过ref获取子组件的实例,然后调用子组件的方法将新的值传递给子组件。例如:
```javascript
// 父组件
<Child ref="mychild" :src-list="xxx"/>
mounted() {
// 通过axios获取数据,假设为rr
this.$refs.mychild.getParentData(rr);
}
// 子组件
methods: {
getParentData(val) {
this.xxx = val;
// 将父组件的数据放到自己的data中
}
}
```
这样,当父组件的数据发生变化时,可以通过调用子组件的方法将新的值传递给子组件,实现props传值的实时更新。
希望对你有帮助!\[2\]
#### 引用[.reference_title]
- *1* *3* [子组件更新props中的属性值,并更新到父组件](https://blog.csdn.net/weixin_62765236/article/details/128949200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue中组件动态传值,实现数据实时更新](https://blog.csdn.net/qq_33404590/article/details/128724331)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]