Vue parent component invokes child component method

parent index.vue

<template>
    <div>
        <button @click="addUser"></button>
        <ul>
            <li v-for="user of userData" :key="user.id"> <span @click="editUser(user.id)"></span></li>
        </ul>
        <Add :show="showAdd"></Add>
        <Edit></Edit>
    </div>
</template>

<script>
import Add from "./add"
import Edit from "./edit"
export default {
  name: "index",
  components: {Edit, Add},
  data () {
    return {
      showAdd: false,
      userData: []
    }
  },
  methods: {
    editUser (id) {},
    addUser () {
      this.showAdd = true
    }
  }
}
</script>

When you click the add button, just display the form in the Add.vue component

editing is not easy, because the user.id to be edited is passed in, and the data to be edited is obtained, and then the form

in the Edit.vue component is displayed.

the first way:

is to get the data to be edited asynchronously in the Index.vue component after clicking edit, and then pass the data to the Edit.vue component and display the Edit.vue component

<template>
    <div>
        <button @click="addUser"></button>
        <ul>
            <li v-for="user of userData" :key="user.id"> <span @click="editUser(user.id)"></span></li>
        </ul>
        <Add :show="showAdd"></Add>
        <Edit :show="showEdit" :editData="editData"></Edit>
    </div>
</template>

<script>
import Add from "./add"
import Edit from "./edit"
export default {
  name: "index",
  components: {Edit, Add},
  data () {
    return {
      showAdd: false,
      showEdit: false,
      editData:{},
      userData: []
    }
  },
  methods: {
    editUser (id) {
        this.$Http.get()
        .then((result)=>{
            this.editData = result.data;
            this.showEdit = true;
        });
    },
    addUser () {
      this.showAdd = true
    }
  }
}
</script>

the second way:

this.$refs.xxx. after clicking Edit Method (); passes id to Edit.vue component
, then Edit.vue component gets edited data and displays Edit.vue component
index.vue parent component

<template>
    <div>
        <button @click="addUser"></button>
        <ul>
            <li v-for="user of userData" :key="user.id"> <span @click="editUser(user.id)"></span></li>
        </ul>
        <Add :show="showAdd"></Add>
        <Edit ref="edit"></Edit>
    </div>
</template>

<script>
import Add from "./add"
import Edit from "./edit"
export default {
  name: "index",
  components: {Edit, Add},
  data () {
    return {
      showAdd: false,
      userData: []
    }
  },
  methods: {
    editUser (id) {
        this.$refs.edit.editUser(id);
    },
    addUser () {
      this.showAdd = true
    }
  }
}
</script>

Edit.vue subcomponents

<template>
    <div v-show="show"> </div>
</template>

<script>
export default {
  name: "edit",
  data () {
    return {
      show:false
      editData: {}
    }
  },
  methods: {
    editUser (id) {
      this.$Http.get("xxxx")
        .then((result)=>{
          this.editData = result.data
          this.show = false;
        })
    }
  }
}
</script>

is there a better way to do this?

Vue.js

Aug.13,2021