vue1向vue2传递数组,vue2遍历数组输出
时间: 2024-07-05 09:01:06 浏览: 139
在Vue.js中,从Vue 1版本向Vue 2版本传递数组时,需要注意数据绑定和响应式更新的方式有所不同。Vue 1中,可以通过`$emit`和`$on`进行父子组件之间的通信,而Vue 2则更倾向于使用props(属性)和自定义事件。
**从Vue 1向Vue 2传递数组:**
Vue 1:
```javascript
// 父组件
var parentComponent = Vue.extend({
data: {
myArray: ['item1', 'item2']
},
methods: {
emitArray: function() {
this.$emit('arrayUpdated', this.myArray);
}
}
});
// 子组件
var childComponent = Vue.extend({
props: {
arrayData: {
type: Array,
default: []
}
},
mounted() {
this.$on('arrayUpdated', function(updatedArray) {
this.arrayData = updatedArray;
});
}
});
```
**Vue 2中遍历数组输出:**
在子组件中,你可以直接使用`v-for`指令遍历接收到的数组:
```html
<template>
<div v-for="item in arrayData">
{{ item }}
</div>
</template>
<script>
export default {
name: 'ChildComponent',
};
</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)