vue组件之间传值，父传子props，子传父$emit

一、父组件向子组件传值，通过props

（1）使用方式一：

参考：

https://blog.csdn.net/qq_42492055/article/details/82558971

（2）使用方式二：

使用elementUI的table组件作为子组件，父组件向table传数据：

思路：el-table绑定自身数据tableData，在页面初始化时或watch监控props改变时调用方法，将父组件的props里的tidedata赋给tableData

<template>
  <el-table
    :data="tableData"
    height="350"
    border
    style="width: 100%">
    <el-table-column
      prop="name"
      label="观潮地点">
    </el-table-column>
    。。。
  </el-table>
</template>

<script>
export default {
  props:{
    tidedata: {
      type: Array,
      default: () => []
    },
  },
  data(){
    return{
      tableData: [],
    }
  },
  methods:{
    reloadTable(){
      this.tableData = this.tidedata;
    }
  },
  mounted(){
    this.reloadTable();
  },
  watch:{
    tidedata(){
      this.reloadTable();
    },
    deep:true
  }
}
</script>

 

二、子组件向父组件传值，通过$emit

查阅官网