Question

我对如何将传递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>

我的代码

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。

要访问父组件上的复选框值var ageConditiion = 15; var originQuery = from a in myPerson select a; var result1 = originQuery.Where(a => a.Age > ageConditiion).ToList(); var result2 = originQuery.Where(a => a.Name == "John").ToList();，您可以将其作为道具传递给父组件，如下所示：

test

这样，它始终是组件的最新版本。在我的codepen中，我将值打印到页面以说明此行为。

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

vue2.js组件vmodel传递数据

1 个答案: