Javascript 为什么我的vue组件不能重新渲染？

我有一个问题，为什么这个组件，在更改值后不重新渲染，所以我尝试做的是像amazon一样的动态过滤器，使用唯一的复选框，让我们看看 我有4个组件[App.vue、test-filter.vue、filterInputs.vue、checkboxs.vue]

这里是我的示例代码沙盒，请检查控制台，您将看到值发生变化

第一个组件是App.vue

<template>
  <div id="app">
    <h1>Filter</h1>
     {{ test }}
    <test-filter :filters="filters" :value="test"></test-filter>
  </div>
</template>

<script>
   import testFilter from "./test-filter";
   import filters from "./filters";
   export default {
      name: "App",
      components: {
         testFilter,
      },
      data() {
          return {
              filters: filters,
              test: {},
           };
      },
   };
</script>

滤器
{{test}}
从“/test filter”导入testFilter；
从“/filters”导入筛选器；
导出默认值{
名称：“应用程序”，
组成部分：{
测试过滤器，
},
数据（）{
返回{
过滤器：过滤器，
测试：{}，
};
},
};

因此，App.vue保存过滤器组件和我想要显示的测试值，过滤器数据是保存对象数组的虚拟数据。 在我的测试过滤器组件中，我循环抛出过滤器道具，过滤器输入组件输出我想要的输入（在本例中是复选框）

test-filter.vue

<template>
 <div class="test-filter">
  <div
     class="test-filter__filter-holder"
       v-for="filter in filters"
       :key="filter.id"
  >
  <p class="test-filter__title">
    {{ filter.title }}
  </p>
  <filter-inputs
    :value="value"
    :filterType="filter.filter_type"
    :options="filter.options"
    @checkboxChanged="checkboxChanged"
  ></filter-inputs>
 </div>
</div>
<template>
<script>
  import filterInputs from "./filterInputs";
   export default {
      name: "test-filter",
      components: {
         filterInputs,
      },
     props:{
         filters: {
          type: Array,
          default: () => [],
         },
         value: {
          type: Array,
          default: () => ({}),
         },
     },
     methods:{ 
        checkboxChanged(value){
           // Check if there is a array in checkbox key if not asssign an new array.
             if (!this.value.checkbox) {
                 this.value.checkbox = [];
             }
             this.value.checkbox.push(value)
         }
     };
 </script>

{{filter.title}

从“/filterInputs”导入filterInputs；
导出默认值{
名称：“测试过滤器”，
组成部分：{
过滤装置，
},
道具：{
过滤器：{
类型：数组，
默认值：（）=>[]，
},
价值：{
类型：数组，
默认值：（）=>（{}），
},
},
方法：{
复选框已更改（值）{
//检查复选框键中是否有数组，如果没有，请指定新数组。
如果（！this.value.checkbox）{
this.value.checkbox=[]；
}
this.value.checkbox.push（值）
}
};

因此，我需要理解为什么更改props值也会更改为父组件，在本例中，App.vue和我尝试将值发送到App.vue，组件也没有重新渲染，但如果我检查vue dev工具，我会看到值已更改，但在{test}中的DOM中没有。 因此，我不会用更多的代码让您感到厌烦filterInputs.vue包含名为checkbox的子组件，从中，我将选中复选框的值从checkbox.vue发送到filterInputs.vue，再发送到test-filter.vue，并且每个组件都具有作为道具的值，如果您想查看其余组件，我很高兴能够如果你做了

过滤网

<template>
 <div>
  <check-box
    v-if="filterType == checkboxName"
    :options="options"
    :value="value"
    @checkboxChanged="checkboxChanged"
    ></check-box>
  </div>
</template>
<script>
  export default {
      props: {
        value: {
           type: Object,
           default: () => ({}),
        },
        options: {
           type: Array,
           default: () => [],
      },
     methods: {
       checkboxChanged(value) {
          this.$emit("checkboxChanged", value);
        },
     },
  }
</script>

导出默认值{
道具：{
价值：{
类型：对象，
默认值：（）=>（{}），
},
选项：{
类型：数组，
默认值：（）=>[]，
},
方法：{
checkboxChanged（值）{
这是$emit（“checkboxChanged”，值）；
},
},
}

复选框.vue

<template>
 <div>
  <div
    v-for="checkbox in options"
   :key="checkbox.id"
   >
  <input
    type="checkbox"
    :id="`id_${_uid}${checkbox.id}`"
    @change="checkboxChange"
    :value="checkbox"
   />
     <label
      :for="`id_${_uid}${checkbox.id}`"
     >
     {{ checkbox.title }}
    </label>
   </div>
 </div>
<template>
<script>
  export default {
     props: {
       value: {
          type: Object,
          default: () => ({}),
       },
       options: {
          type: Array,
          default: () => [],
       },
     }
     methods: {
       checkboxChange(event) {
         this.$emit("checkboxChanged", event.target.value);
       },
    },
  };
  </script>

{checkbox.title}}
导出默认值{
道具：{
价值：{
类型：对象，
默认值：（）=>（{}），
},
选项：{
类型：数组，
默认值：（）=>[]，
},
}
方法：{
checkboxChange（事件）{
这个.emit（“checkboxChanged”，event.target.value）；
},
},
};

我找到了解决方案，正如我在评论中所说的。问题是我没有在复选框输入中使用v-model。Vue是一个非常好的框架。问题并不深入，我在复选框输入中测试了v-model，我发现它在我选中任何复选框后重新渲染组件，因此我搜索了更多内容，并在其中找到了解释h我们可以在自定义组件中实现v-model，这就是我的问题的解决方案，如果您想查看，我也会更新我的

---

Big Thaks感谢所有支持我找到解决方案的人：sarkiroka，Jakub A Suplick

使用反应属性：）您提供的代码存在一些问题。请尝试在适当的位置重新创建一个工作示例，以便我们详细查看。我制作了一个示例。请检查控制台：我发现了为什么出现这种奇怪行为的问题vior之所以发生，是因为我在复选框输入中没有使用“v-model”，我尝试在输入中使用v-model，结果成功了，组件重新渲染……但是有任何方法可以解决这个问题。