vue子路由数据传输到父路由数组
时间: 2023-10-22 16:04:37 浏览: 48
在 Vue 中,可以通过 $emit 方法在子组件中触发自定义事件,并将子组件中的数据传递给父组件。在父组件中,可以通过在子组件标签上使用 v-on 指令监听子组件触发的事件,然后在父组件的方法中接收子组件传递过来的数据。
如果要将子路由中的数据传递到父路由的数组中,可以在父路由中定义一个数组,并将该数组作为 props 传递给子路由组件。在子路由组件中,可以通过 $emit 方法触发一个自定义事件,并将子路由中的数据作为参数传递给该事件。在父路由组件中,可以在监听该事件的方法中将子路由传递过来的数据添加到父路由的数组中。
以下是一个简单的示例代码:
父路由组件:
```
<template>
<div>
<router-view :items="items" @add-item="addItem"></router-view>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: []
}
},
methods: {
addItem(item) {
this.items.push(item)
}
}
}
</script>
```
子路由组件:
```
<template>
<div>
<input type="text" v-model="newItem">
<button @click="addItem">Add Item</button>
</div>
</template>
<script>
export default {
props: ['items'],
data() {
return {
newItem: ''
}
},
methods: {
addItem() {
this.$emit('add-item', this.newItem)
this.newItem = ''
}
}
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)