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 {};
  },
};

传递数据注意

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