vue2.js 组件 vmodel 传递数据

Question

我对如何使用将 v-model 数据传递给组件有一点了解。

可以直接访问checkbox模型数据还是需要通过props传入组件？

如果有人用代码解释或指出对我有帮助的地方？

我的 HTML

  <template id="my-child">

    <tr>
      <td >{{ item.title }}</td>
      <td style="padding:20px" v-for="price in item.prices"   v-bind:price="price" >{{ price }}</td>
    </tr>
  </template>


    <template id="my-parent">

      <div class="box" >
          <div v-for="item in items">
            <h1>{{ item.name }}</h1>
                <img :src="item.imageUrl" style="width:200px;">
                <p>{{item.extract}}</p>
                {{ item.holidayType }}

                  <div is="task" v-for="avail in item.avail"   v-bind:item="avail"  >

                  </div>    


          </div>
      </div>

    </template>

   <div id="root">
      <div id="homesFilters">


          <input type="checkbox" id="1" value="hottub" v-model="test"> hot tub
          <input type="checkbox" id="2" value="garden" v-model="test"> garden
          <input type="checkbox" id="3" value="cottage" v-model="test"> cottage
      </div>

       <task-list></task-list>
    </div>

我的代码

Vue.component('task-list', {
  template: '#my-parent',
  props: ['test'],
  data: function() {
        return {
            items: [],

        }
  },
  methods: {
    getMyData: function(val) {

      console.log(this.test);

        var _this = this;
        $.ajax({
            url: 'vuejson.php',
            method: 'GET',
            success: function (data) {

                _this.items = data;
            },
            error: function (error) {
                alert(JSON.stringify(error));
            }  
        })

     }
  },
  mounted: function () {
       this.getMyData("0");
    }
});

Vue.component('task', {

  template: '#my-child',
  props: ['item'],

    data: function() {
        return {

        }
    }
});


new Vue({
  el: "#root",
  data: {
      test:[]
  },

});

</script>

Answer 1

我用您的代码（和模拟数据）编写了一个快速代码笔：https://codepen.io/tuelsch/pen/RVrXbX?editors=1010。

要访问父组件上的复选框值test，您可以将其作为道具传递给父组件，如下所示：

<task-list v-bind:test="test"></task-list>

这样，组件将始终保持最新状态。在我的 codepen 中，我将值打印到页面以说明这种行为。

如果您的应用程序变得更大，您可能需要考虑使用像 vuex https://vuex.vuejs.org/en/ 这样的通量模式来存储您的过滤器值并从您的组件中访问它们。