vue怎么模板中怎么使用prop传过来的数组

Question

就想把props里的tableData，绑到模板中el-table里的:data

<el-table :data="tableData""></el-table>


export default {
   props: ['tableData']
   data() {
     return{
         tableData
     }
   }
}

Answer 1

不知道我有没有理解错题主的意思，我按照我的理解说一下～

<template>
    <el-table :data="tableData""> <!-- 这里的tableData，就是prop传递过来的数据-->
         <el-table-column prop="country" label="Country" align="center" width="100">
          <template slot-scope="props">
             {{props.row.country}}
          </template>
         </el-table-column>
    </el-table>
</template>

<script>
export default {
   props: {
    tableData: Array
     /** 这里的tableData，是父组件通过Prop向这个子组件传递的数据，在模版中可以直接使用tableData
     注意： 1、单向数据流，不能在这个子组件内部改变tableData的值，如果这个prop以一种原始的值传入且需要进行转换，使用这个 prop 的值来定义一个计算属性;
           2、在js中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态;
     **/
  },
  data(){
      return{
          // tableData:[] -- 这里不能重复定义名为tableData的属性, 当把一个值传递给一个prop特性时，它就变成了那个组件实例的一个属性（这里父组件将数据传递给tableData特性，那么tableData就成了这个组件的一个属性，所以不需要再重新定义，在模版中直接用就好了）
      }
  }
  
}
</script>

Answer 2

<script>
export default {
props:["data"]
}
</script>

用的时候直接this.data就行了