Javascript vue2.js组件vmodel传递数据

我对如何使用将v模型数据传递给组件缺少一点了解

我可以直接访问复选框模型数据，还是需要通过道具传递到组件中

如果有人给我解释代码或者给我指一些有用的地方

我的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>

{{item.title}
{{price}}
{{item.name}
{{item.extract}

{{item.holidayType}
热水浴缸
花园
小屋

我的代码

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>

Vue.component（'task-list'{
模板：“#我的父母”，
道具：[“测试”]，
数据：函数（）{
返回{
项目：[]，
}
},
方法：{
getMyData:函数（val）{
console.log（this.test）；
var_this=这个；
$.ajax({
url:'vuejson.php'，
方法：“GET”，
成功：功能（数据）{
_此项=数据；
},
错误：函数（错误）{
警报（JSON.stringify（错误））；
}  
})
}
},
挂载：函数（）{
此.getMyData（“0”）；
}
});
Vue.component（'任务'{
模板：“#我的孩子”，
道具：['item']，
数据：函数（）{
返回{
}
}
});
新Vue({
el:“根”，
数据：{
测试：[]
},
});

我为您的代码（和模拟数据）准备了一个快速代码笔：

要访问父组件上的复选框值

test

，可以将其作为道具传递给父组件，如下所示：

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

这样，它在组件上始终是最新的。在我的代码笔中，我将这些值打印到页面以说明这种行为

---

<>如果你的应用程序越来越大，你可能想考虑使用像VUEX这样的磁通模式来存储过滤器值并从组件中访问它们。我将研究vuex

root:{{test}}

是一种快速而肮脏的方法，用于检查此范围内的测试内容，并查看在选中/取消选中过滤器时它是如何变化的。Vue非常适合以人类可读的方式打印阵列。您可以向子组件传递任意数量的道具：因此，在组件中，我现在可以访问此。测试？