两个子组件怎么传递数据
时间: 2024-06-14 22:05:01 浏览: 12
在Vue.js中,父组件可以通过props属性将数据传递给子组件。以下是一个示例,演示了如何在两个子组件之间传递数据:
父组件:
```vue
<template>
<div class="Parent">
<Child1 :val_1="value_1" />
<Child2 :val_2="value_2" />
</div>
</template>
<script>
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
export default {
name: 'Parent',
components: {
Child1,
Child2
},
data() {
return {
value_1: "父组件中的数据1",
value_2: "父组件中的数据2"
}
}
}
</script>
```
子组件1:
```vue
<template>
<div class="Child1">
<h1>{{ val_1 }}</h1>
</div>
</template>
<script>
export default {
name: 'Child1',
props: ['val_1']
}
</script>
```
子组件2:
```vue
<template>
<div class="Child2">
<h1>{{ val_2 }}</h1>
</div>
</template>
<script>
export default {
name: 'Child2',
props: ['val_2']
}
</script>
```
在父组件中,我们通过使用冒号(:)将父组件的数据绑定到子组件的props属性上。子组件通过props属性接收父组件传递过来的数据,并在模板中使用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)