vue组件传值：父传子 props

案例-表格渲染

如图：将A页面（父）传到 B页面（子）

A页面引入B组件显示

具体写法：

代码如下：
A页面（父组件）

<tableChild :tableDataChild = "tableData">tableChild>

import tableChild  from "./tableModule";
export default {
  name: "moduleByValueIndex",
  components: {
    tableChild
  },
  data() {
    return {
       tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    };
  },

B页面（子组件）

<table>
        <thead>
            <th>序号th>
            <th>日期th>
            <th>姓名th>
            <th>地址th>
        thead>
        
        <tr v-for="(item,idx) in tableDataChild" :key="idx">
            <td>{{idx + 1}}td>
            <td>{{item.date}}td>
            <td>{{item.name}}td>
            <td>{{item.address}}td>
        tr>
    table>

export default {
  name: "tableModule",
  props: {
    tableDataChild: {
      type: Array,
      default: () => [],
    },
  },
  //props:["tableData"]
  data() {
    return {};
  },
};

传递数据注意

props 只用于父组件向子组件传递数据所有标签属性都会成为组件对象的属性, 模板页面可以直接引用如果需要向非子后代传递数据，必须多层逐层传递或采用非父子传值方法，例如 总线方式兄弟组件间也不能直接 props 通信, 必须借助父组件才可以props传递的类型和写法