vue3怎么实现组件间相互传送数据
时间: 2023-06-13 22:03:09 浏览: 58
在 Vue3 中,可以使用 props 和 emit 实现组件之间相互传送数据。
1. 使用 props:
父组件可以通过 props 将数据传递给子组件,子组件则可以使用这些数据进行渲染和处理。
在父组件中:
```html
<template>
<child-component :prop-name="data"></child-component>
</template>
<script>
export default {
data() {
return {
data: 'Hello World!'
}
}
}
</script>
```
在子组件中:
```html
<template>
<div>{{ propName }}</div>
</template>
<script>
export default {
props: ['propName']
}
</script>
```
2. 使用 emit:
子组件可以通过 emit 事件向父组件传递数据,父组件则可以监听这些事件并处理数据。
在子组件中:
```html
<template>
<button @click="emitData">Send Data</button>
</template>
<script>
export default {
methods: {
emitData() {
this.$emit('event-name', 'Hello World!')
}
}
}
</script>
```
在父组件中:
```html
<template>
<child-component @event-name="handleData"></child-component>
</template>
<script>
export default {
methods: {
handleData(data) {
console.log(data) // 'Hello World!'
}
}
}
</script>
```
以上是 Vue3 中实现组件间相互传送数据的两种方法,你可以根据需要选择使用其中的一种或者两种方法结合使用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)