子组件怎么获取父组件传来的值
时间: 2023-09-20 08:06:30 浏览: 53
在Vue中,子组件可以通过props来接收父组件传递过来的值。父组件可以通过在子组件标签上使用属性的方式来传递值。子组件在props选项中定义了要接收的属性后,就可以在子组件的模板中使用这些属性了。
例如,父组件中的模板代码如下:
<template>
<div>
<child-component :propName="parentValue"></child-component>
</div>
</template>
在子组件的props选项中定义要接收的属性:
props: {
propName: {
type: String,
default: ''
}
},
子组件可以在其模板中使用propName属性:
<template>
<div>
<p>父组件传来的值: {{ propName }}</p>
</div>
</template>
这样子组件就可以获取父组件传递过来的值并在其模板中使用了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [VUE里子组件获取父组件动态变化的值](https://blog.csdn.net/weixin_30940783/article/details/97986827)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [VUE子组件向父组件传值详解(含传多值及添加额外参数场景)](https://download.csdn.net/download/weixin_38644097/12923690)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [解决vue 子组件修改父组件传来的props值报错问题](https://download.csdn.net/download/weixin_38712548/12932387)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]