vue父子组件之间的传值 - 父向子传值

• 组件是可复用的 Vue 实例，且带有一个自行定义的名字：在这个例子中是 childTemplate
  此次为实现将父组件的数组tableData传入子组件并在子组件内使用展示

  对于父组件向子组件传值用简单的话来说，就是父组件使用v-bind绑定自定义属性，子组件使用props接收

文档摘取：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
关于prop的更多解释参考官网文档：Prop - Vue.js

父组件代码内容

<template>
  <div id="app">
    <h2>这是父组件</h2>
    <p>将父组件的数据传入子组件，引入子组件实现页面展示</p>
    <!-- 父组件向子组件传值（允许数组、对象任何类型的值）绑定一个自定义的属性 -->
    <childTemplate  :tableData="tableData" />
			   <!-- ↑ 自定义属性  ↑ 父组件数据名 -->
  </div>
</template>

<script>
// 引入子组件
import childTemplate from './views/children.vue'
export default {
  data(){
    return{
      tableData: [{
            date: '2020-06-29',
            name: '王皮皮',
            title: '在家小霸王，出门小王八'
          }, {
            date: '2020-06-29',
            name: '王皮皮',
            title: '在家小霸王，出门小王八'
          }, {
            date: '2020-06-29',
            name: '王皮皮',
            title: '在家小霸王，出门小王八'
          }, {
            date: '2020-06-29',
            name: '王皮皮',
            title: '在家小霸王，出门小王八'
          }]
    }
  },
  // 组件注册
  components:{
    childTemplate
  },
}
</script>
<style scoped>
    #app {
      width: 1000px;
      margin: 0 auto;
    }
</style>

子组件代码内容

• 子组件通过props接受父元素传入的属性
• 我们可以像是使用data中的值一样直接使用props中的值

<template>
  <div class="child-content">
	这是子组件的内容  <i>（灰色背景部分）</i>
    <div class="child">
      <div v-for="(item,key) in tableData" :key="key">
        <p>{{item.name}}</p>
        <p>{{item.title}}</p>
        <p>{{item.date}}</p>
      </div>
  </div>
  </div>

</template>

<script>

export default {
  props:{
    tableData:{   //tableData为父组件在对子组件绑定值时自定义的属性名
      type:Array  //传入值的数据类型
    },
  }
}
</script>
<style scoped>
  .child-content{
    width: 1000px;
    padding: 20px;
    background-color: #f1f1f1;
  }
  .child{
    width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .child div{
    width: 160px;
    height: 150px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
  }

</style>

以上代码运行示例图