vue组件传值：父传子 props

案例-表格渲染

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

A页面引入B组件显示

具体写法：

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

<tableChild :tableDataChild = "tableData"></tableChild>
<!-- <tableChild :tableData= "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>
        <!-- v-for="(item,idx) in tableData" -->
        <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 {};
  },
};

传递数据注意

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