vue2中父组件向子组件传值不更新视图问题解决

1. 由于父组件更新了props里面的值, 但是子组件第一次接收后再修改没有监听到. 父组件修改值的时候使用this$set解决问题.

在 Vue 2 中，this.$set 通常用于更新数组中的特定元素。如果你想更新整个数组，可以直接赋值一个新的数组，或者你可以使用 Vue.set 或 this.$set 来更新数组的引用。下面是具体的步骤和示例：

this.$set(this, 'items', newArray)

示例代码

假设你有一个 Vue 组件，其中 items 是一个数组，你想更新这个数组：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    updateItems() {
      // 新的数组
      const newArray = [
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' }
      ]
      
      // 方法一：直接赋值
      this.items = newArray
      
      // 方法二：使用 this.$set 更新数组引用
      // this.$set(this, 'items', newArray)
    }
  }
}
</script>

传入this, 'items'为this的属性