Question

我有表格和选择组件。实际上事情很简单：我需要两个绑定模型。

父组件：

    Vue.component('some-form', {
      template: '#some-form',
      data: function() {
        return {
          countryNameParent: ''
        }
      }
   });

包含项目的子组件：

Vue.component('countries', {
  template: '#countries',
  data: function () {
    return {
      items: {
        "0": {
          "id": 3,
          "name": "Afghanistan"          
        },
        "1": {
          "id": 4,
          "name": "Afghanistan2"          
        },
        "2": {
          "id": 5,
          "name": "Afghanistan3"          
        }
      },
      countryName: ''
    }
  },
  props: ['countryNameParent'],
  created: function() {
    var that = this;
    this.countryName = this.countryNameParent;
  },

  methods: {
    onChange: function (e) {
      this.countryNameParent = this.countryName;
    }
  }
});

我正在使用v-model来合并上面的组件。像这样的模板：

<template id="some-form">
  {{ countryNameParent }}
  <countries v-model="countryNameParent"></countries>
</template>

<template id="countries">
  <label for="">
    <select name="name" @change="onChange" v-model="countryName" id="">
      <option value="0">Select the country!</option>
      <option v-for="item in items" v-bind:value="item.name">{{ item.name }}</option>
    </select>
  </label>
</template>

我的目标是获取父组件中的数据以将其发送到服务器（实际形式更大），但我无法获得countryName中countryNameParent的值。此外，如果不是空的话，Parent应该在后继中设置数据。

在这里你link我试图以多种方式做到这一点（参见评论部分）。我知道我需要使用$emit来正确设置数据，我甚至实现了模型，我将图像作为base64以相同的形式发送它，因此我认为解决方案正在接近！

另外：reference我用图像构建样本。

Answer 1

以下更新了countries组件以支持v-model。

Vue.component('countries', {
  template: `
  <label for="">
    <select v-model="countryName">
      <option value="0">Select the country!</option>
      <option v-for="item in items" v-bind:value="item.name">{{ item.name }}</option>
    </select>
  </label>
  `,
  data: function () {
    return {
      items: {
        "0": {
          "id": 3,
          "name": "Afghanistan"          
        },
        "1": {
          "id": 4,
          "name": "Afghanistan2"          
        },
        "2": {
          "id": 5,
          "name": "Afghanistan3"          
        }
      },
    }
  },
  props: ['value'],
  computed:{
    countryName: {
      get() { return this.value },
      set(v) { this.$emit("input", v) }
    }
  },
});

v-model只是用于设置value属性并收听input事件的糖。因此，要在任何组件中支持它，组件需要接受value属性，并发出input事件。使用哪个属性和事件是可配置的（记录here）。

如何用vue js绑定组件？

1 个答案: