uniapp父组件怎么在子组件挂载之前传参数给子组件
时间: 2023-08-08 18:05:22 浏览: 50
在uni-app中,可以通过在父组件的`mounted`生命周期函数中,使用`this.$children`访问子组件,并将参数传递给子组件。具体来说,可以在父组件中这样写:
```vue
<template>
<div>
<child-component :prop1="prop1"></child-component>
</div>
</template>
<script>
import ChildComponent from '@/components/ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
prop1: 'hello'
}
},
mounted() {
this.$children[0].prop2 = 'world';
}
}
</script>
```
在子组件中,可以通过`props`接收来自父组件的参数,并在`mounted`生命周期函数中使用这些参数。同时,也可以在父组件中使用`this.$children`访问子组件,通过设置子组件的属性来传递参数。具体来说,可以在子组件中这样写:
```vue
<template>
<div>
<p>{{ prop1 }}</p>
<p>{{ prop2 }}</p>
</div>
</template>
<script>
export default {
props: {
prop1: {
type: String,
default: ''
}
},
data() {
return {
prop2: ''
}
},
mounted() {
console.log(this.prop2); // world
}
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)