<template>
  <div>
    <div>
      <el-table :data="myUser">
        <el-table-column label="name" prop="name"></el-table-column>
        <el-table-column label="age" prop="age"></el-table-column>
        <el-table-column>
          <template scope="scope">
            <el-button type="primary">主要按钮</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <DemoChildren :user="myUser" @sendMessageToFather="handlerTitle"></DemoChildren>
  </div>
</template>

<script>
import DemoChildren from "./DemoChildren"
export default {
  name: "DemoFather",
  components: {
    DemoChildren
  },
  data () {
    return {
      myUser: [
        {id: null, name: 'lz', age: 12},
        {id: 1, name: 'lz', age: 12},
        {id: 2, name: 'lz', age: 12},
        {id: 3, name: 'lz', age: 12},
        {id: null, name: 'lz', age: 12}
      ]
    }
  },
  methods: {
    handlerTitle(title) {
      for (const element of this.myUser) {
        element.name = title
      }
    }
  }
}
</script>

<style scoped>

</style>
