Question

我在父组件中有一个JSON对象，例如。 [{type:"checkbox", allValues:["1", "2"], selectedValues:[]}]。我想呈现一个子组件，该子组件的每个 allValues 值都具有一个复选框，如果选中了该复选框，它将把该值保存在 selectedValues 中。到目前为止，我有：

在父组件中：

<inputCheckbox 
v-if="item.description.field === 'checkbox'" 
v-bind:selectedValues=item.selectedValues
v-bind:allValues=item.allValues>
</inputCheckbox>

在子组件中：

<template>
  <div>
    <div v-for="(item, index) in this.$props.allValues" v-bind:key="index">
      <input type="checkbox" :value=item v-model="$props.selectedValues">
      <label>{{item}}</label>
    </div>
    {{$props.selectedValues}} ---> this works, I can see the array correctly filled 
  </div>  
</template>

<script>

export default {
  name: 'InputCheckbox',
  props: [
    'allValues',
    'selectedValues'
  ]
}
</script>

但是当我在父组件中尝试{{$props.selectedValues}}时，该数组为空。

这有什么问题？

Answer 1

您应该直接在组件引用中使用v-model，即<InputCheckbox v-model="...">进行双向绑定。然后在InputCheckbox组件内部内部，value道具将用作绑定值。如果您使用复选框或单选按钮，则可能要使用model选项，然后选择另一个道具名称，例如checked。

然后，在子组件中，您只需要侦听onInput / onChange事件并发出input事件。在父元素中，v-model绑定将侦听此自定义事件并相应地更新父数据，从而实现双向绑定。

这是一个概念验证示例：

Vue.component('input-checkbox', {
  template: '#input-checkbox-template',
  model: {
    prop: 'checked',
  },
  props: {
    checked: Boolean
  },
  methods: {
    onInput(e) {
      this.$emit('input', e.target.checked);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    myCustomToggle: true,
  }
});

.box {
  border: 1px solid #000;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>Boolean toggle</h1>
  Value on the parent component: {{ myCustomToggle }}
  <br /><br />
  <!-- Use v-model on the parent component! -->
  <input-checkbox v-model="myCustomToggle" />
</div>

<script type="text/x-template" id="input-checkbox-template">
  <div class="box">
    <input type="checkbox" v-bind:checked="checked" v-on:input="onInput"/>
    <br />
    Value on the child component: {{ checked }}
  </div>
</script>

查看有关道具的双向绑定的更多信息：https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

Vuejs-将道具（从对象）传递给孩子，然后传递回父母

1 个答案: