Question

我有一个问题，为什么不使用此组件，而在更改值后不重新渲染，所以我想做的是使用仅复选框使用类似于Amazon的动态过滤器，所以让我们来看一下我有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保存了过滤器组件和要显示的测试值，并且过滤器数据是保存对象数组的伪数据。在我的测试过滤器组件中，我循环抛出过滤器道具，并且filterInputs组件输出我想要的输入（在这种情况下，请选中复选框）。

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>

所以我需要理解为什么更改props值也更改为父组件，在这种情况下，我和App.vue尝试将值发送给App.vue，该组件也没有重新渲染，但是如果我检查了vue dev工具，发现值已更改，但在{{test}}的DOM中未更改。因此，我不会为您带来更多代码，filterInputs.vue保存了称为复选框的子组件，从中，我从checkboxes.vue向filterInputs.vue到test-filter.vue以及每个组件发出选定复选框的值。具有作为道具的价值，如果您想看看其余的组件，我会很高兴的。

filterInpust.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>

checkboxes.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在我的复选框输入中，我发现它在选择任何复选框后都重新渲染了组件，因此我进行了更多搜索，发现this article ，它的内部解释了如何在自定义组件中实现v-model，因此是解决方案解决我的问题，如果您想检出codeSandbox Example，我也会对其进行更新。

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

为什么不重新渲染我的Vue组件？

1 个答案: