為什么我的 vue 組件不重新渲染？

Question

我有一個問題，為什么不使用這個組件，而不是在更改值后重新渲染，所以我想做的是像亞馬遜這樣的動態過濾器，使用唯一的復選框，所以讓我們看看我有 4 個組件 [App.vue, test-filter. vue, filtersInputs.vue, checkboxs.vue]

這是我的示例的代碼沙箱，請檢查控制台，您將看到值更改https://codesandbox.io/s/thirsty-varahamihira-nhgex?file=/src/test-filter/index.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>

所以 App.vue 包含過濾器組件和我想要顯示的測試值，過濾器數據是包含對象數組的虛擬數據。 在我的測試過濾器組件中，我循環拋出過濾器道具和過濾器輸入組件 output 在這種情況下我想要的輸入復選框。

測試過濾器.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>

所以我需要了解為什么更改 props 值也會更改為父組件，在這種情況下，App.vue 和我嘗試將值發送到 App.vue 組件也沒有重新渲染但是如果我檢查vue 開發工具我看到值發生了變化，但在 {{ test }} 的 DOM 中沒有。 所以我不會用更多代碼讓你感到無聊，filterInputs.vue 包含稱為復選框的子組件，然后我將選定復選框的值從 checkboxes.vue 發送到 filterInputs.vue 到 test-filter.vue 和每個組件具有作為道具的價值，如果你想看看 rest 的組件，我會很高興如果你這樣做了。

過濾器輸入.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>

復選框.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>

Answer 1

我找到了解決方案 正如我在評論中所說，問題是我沒有在我的復選框輸入中使用 v-model Vue 是一個非常棒的框架，問題並不深入，我在我的復選框中測試了 v-model輸入，我發現它在我 select 任何復選框之后重新渲染組件，所以我搜索更多並找到這篇文章，其中解釋了我們如何在自定義組件中實現 v-model，這是我的問題的解決方案，也是我如果您想查看它，請更新我的codeSandbox 示例。

感謝所有支持我找到解決方案的人：sarkiroka，Jakub A Suplick