使用嵌套组件vuejs的最佳实践提交表单

Question

我在VueJs做一个电话招标项目。

我有一个页面来创建或更新呼叫招标。要做到这一点，我有一个表格：

1. 经典形式输入
2. 一个带有调用招标行的表(参见4)，我可以添加带有产品搜索组件的行(参见3)

我想知道向我的api发送一个新的调用招标的实际做法是什么？

​

​

谢谢你的答复。瓦伦丁

Answer 1

你不需要vuex：

• 您的整个状态必须驻留在1
• 您的状态必须通过向下通过道具传递给子组件。
• 您的状态更新必须通过向传递给父组件(通过事件 )。
• 您不需要将搜索值的更新传递给1，因为只有2只关心它。

请注意，V-模型指令同时执行这两个操作，因为

<Child v-model="x"/>

的别名

<Child :value="x" @input="x = $event"/>

总而言之，应该类似于：

​

Vue.config.productionTip = false;

const Three = {
  template: `<input :value="search" @input="$emit('input', $event.target.value)" placeholder="search">`,
  data() {
    return {
      search: '',
    }
  }
};

const Four = {
  template: `
    <div>
      <div v-for="product of value">
        <template v-if="product.name.includes(search)">
          {{ product.name }}
          <input type="checkbox" v-model="product.chosen">
          <input type="number" v-model="product.quantity">
        </template>
      </div>
    </div>
  `,
  props: ['search', 'value'],
};

const Two = {
  template: `
    <div>
      <Three v-model="search"/>
      <Four v-model="value.products" :search="search"/>
    </div>
  `,
  components: { Three, Four },
  props: ['value'],
  data() {
    return {
      search: '',
    };
  },
};

const One = {
  template: `
    <div>
      <input placeholder="title" v-model="value.title">
      <input type="date" v-model="value.date">
      <textarea placeholder="comment" v-model="value.comment"></textarea>
      <Two v-model="value"/>
      <hr>
      <pre>form value is currently {{ value }}</pre>
    </div>
  `,
  components: { Two },
  data() {
    return {
      value: {
        title: '',
        date: undefined,
        comment: '',
        products: [
          { name: 'screwdriver', chosen: false, quantity: 0 },
          { name: 'lawnmover', chosen: false, quantity: 0 },
          { name: 'car', chosen: false, quantity: 0 },
        ],
      },
    };
  },
};

new Vue({
  el: '#app',
  render: (h) => h(One),
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

​