vue 父向子传递数组

父组件向子组件传递数组数据

父组件：

// 使用v-bind:子组件接收的数据名称="父组件传递的数据名称"
// 可以进行简写省略掉 -> :dataTypes="dataTypes"
<template>
  <data-type v-bind:dataTypes="dataTypes"></data-type>
</template>

<script>
// 进行子组件的引用
import DataType from '../components/DataType.vue'
export default {
  components: {
    // 对子组件进行声明 
    DataType
  },
  data () {
    return {
      // 这是‘父组件传递的数据名称’的定义
      dataTypes: []
    }
  }
</script>

子组件：

<template>
<div v-for="item in dataTypes" :key="item.index">
	{{ item.id }}
</div>
</template>
<script>
export default {
  // 使用 props 进行接收
  props: {
    // 对‘子组件接收的数据名称’进行声明，需要标明接收数据的类型‘Array’
    dataTypes: Array
  },
  data () {
    return {
      // 重新赋值，避免破坏原数据
      dataTypesTemp: this.dataTypes
    }
  }
}
</script>

传递数组数据需要注意，数组是引用类型数据，传递过来的是数据地址，最好不要在子组件内随意修改，不然会破坏该数据。也就是说在某个子组件内进行修改，其他接收该数据的子组件中的数据也会发生变化。
如果想要修改，最好将其赋值给该子组件内的其他数据。