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>

傳遞數組數據需要注意，數組是引用類型數據，傳遞過來的是數據地址，最好不要在子組件內隨意修改，不然會破壞該數據。也就是說在某個子組件內進行修改，其他接收該數據的子組件中的數據也會發生變化。
如果想要修改，最好將其賦值給該子組件內的其他數據。