Vue.js中父组件数据变化时如何触发内部子组件重新渲染

问题根因及修复方案 #

你遇到的问题由以下几个错误共同导致，逐一修改即可正常运行： #

1. 异步函数getUsernames返回逻辑错误

你没有正确接收异步操作的返回值，两种正确写法二选一：

// 写法1：直接返回Promise
function getUsernames(listID) {
  return sleep(200).then(() => {
    switch (listID) {
      case 0: return ['Pierre', 'Paul', 'Jaques']
      case 1: return ['Riri', 'Fifi', 'Loulou']
      case 2: return ['Alex', 'Sam', 'Clover']
      default: return []
    }
  })
}

// 写法2：async/await 接收结果后返回
async function getUsernames(listID) {
  const res = await sleep(200).then(() => {
    switch (listID) {
      case 0: return ['Pierre', 'Paul', 'Jaques']
      case 1: return ['Riri', 'Fifi', 'Loulou']
      case 2: return ['Alex', 'Sam', 'Clover']
      default: return []
    }
  })
  return res
}

2. watch支持async/await，直接在回调中等待异步结果再赋值

你之前的写法直接把getUsernames返回的Promise赋值给了usernames，自然会把Promise传递给子组件，修改watch逻辑：

watch: {
  async listID(newID) {
    this.usernames = await getUsernames(newID)
  }
}

3. 子组件props类型声明错误

你传递的是数组，props类型应该设为Array，同时设置默认值避免空值报错：

export default {
  props: {
    usernames: {
      type: Array,
      default: () => []
    }
  }
}

4. 父组件usernames初始值优化

把初始值从undefined改成空数组，避免子组件遍历非可迭代对象报错：

data() {
  return {
    listID: 0,
    usernames: [],
  }
}

内容的提问来源于stack exchange，提问作者e2r3p13