vue3 setup 父子组件实时传参
时间: 2023-10-16 09:10:12 浏览: 112
在Vue3中,使用`setup`语法可以在组件中定义逻辑。通过父子组件之间实时传参的实现有多种方式。
一种方式是使用`defineEmits`和`emit`来实现子组件向父组件传值。在子组件`waterFall.vue`中,可以使用`defineEmits`定义一个事件`on-click`,然后在`send`方法中使用`emit`来触发该事件,并传递参数。在父组件`App.vue`中,可以在子组件标签上使用`@on-click`绑定一个方法,当子组件触发`on-click`事件时,父组件的方法将被调用,传入子组件传递的参数。
另一种方式是通过`defineProps`来接收父组件传递的参数。在子组件`waterFall.vue`中,可以使用`defineProps`定义一个属性`title`,并设置其类型和默认值。在父组件`App.vue`中,可以在子组件标签上使用`:title`将值传递给子组件的`title`属性。
综上所述,通过使用`defineEmits`和`emit`可以实现子组件向父组件实时传参,而使用`defineProps`可以实现父组件向子组件实时传参。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [【Vue3】父子组件传参](https://blog.csdn.net/XiugongHao/article/details/131971259)[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_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
阅读全文
相关推荐
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)