vue 父组件调用子组件方法

原文：https://segmentfault.com/q/1010000016643069

父组件 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>

添加的好写 在点击添加按钮的时候显示Add.vue组件里面的表单就行了

编辑的就不好搞了 因为要将要编辑的 user.id 传递进去,获取到要编辑的数据后再显示 Edit.vue 组件里面的表单

第一种方式:

就是在点击编辑之后在 Index.vue 组件中异步去获取要编辑的数据 获取成功后将数据传递给 Edit.vue 组件 再展示Edit.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 :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>

第二种方式:

点击编辑之后 this.$refs.xxx.方法(); 将id传递给 Edit.vue 组件 
之后再 Edit.vue 组件内获取编辑的数据 之后显示Edit.vue组件
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 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 子组件

<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>

有更好的办法可以做到吗?