vue 父组件调用子组件方法

Question

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

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

Answer 1

不知道你希望得到的结果是什么？仅仅从现在的代码智能看到以下你的需求：

如果单单从这两种方法看，都是可行的，第一种方式更加适合一点。因为你组件是要复用的，ref是唯一的，这样耦合性太高。
推荐你用第一种方式。

Answer 2

第 1 种方法是数据驱动视图的方式，应该是 Vue 官方推荐的方法。
第 2 种方法是传统组件调用的方法，虽然 Vue 提供，但似乎并不推荐。

无论哪种方法，都可以传入 ID 或者传入整个模型到子组件中。不过通过 Props 传入 ID 的情况需要在子组件中检查到变化，以重新获取远端数据，所以需要能检测到 ID 变化来触发远程调用。有三个地方可以检查

• watch
• beforeUpdate()
• updated()

Answer 3

楼上边城说的对！

Answer 4

要看的需求了，是基础组件还是业务组件。感觉把逻辑封装进去也挺好，组件完全独立。复用性比逻辑在外面的好