Vue2:与模型处理多孩子托同步(Vue2: handling multi-child prop s

2019-11-04 21:10发布

我是新来的Vue(约,并在阅读文档是非常有帮助的,常常在不能得到我应该如何实现所需的行为的情况。

我做了几个小部件以获取道具传递和处理事件的感觉,所以现在我想使东西有点大,但现在面临一些困难。

这种困难来自以下梗:

我想有一个通过一个初始化的定制选择组件v-for循环。 我所想的,同时有机会获得所选选项这些组件。 我可以绑定与该选择数据v-model的容器循环在包装中选择组件,但我努力让这些信息出来的包装,又独自一人。

注:我使用的汇总和单个文件的组成部分

顶层

<template >
  <div>
    <select-container
      v-for="(select, index) in selects"
      :index="index"
      :key="select.id"
      :select.sync="select"
    />
  </div>



</template>

<script>
import selectContainer from './select-container.vue';


export default {
  components: { selectContainer },

  props: {
    records: {
      default: function(){return{}},
      type: Object
    }
  },

  data: function() {
    return {
      selects: [{}, {}]
    }
  },

  computed: {

  },

  methods: {

  }
}
</script>

<style scoped>

</style>

选择容器

<template>
  <div>
    <my-select
      v-model.sync="select"
    />
  </div>
</template>

<script>
import mySelect from './my-select.vue';

export default {
  components: { mySelect },
  props: {
    index: { type: Number },
    select: {
      type: Object,
      default: function(){return{}}
    }
  },

  data : function(){
    return {

    }
  },

  methods: {

  },

  computed: {

  }
}
</script>

<style scoped>

</style>

我选

<template>
  <select v-model="selected">
    <option
      v-for="(attr, index) in attributes"
      :value="attr"
      :selected="attr == selected"
    >
      {{attr}}
    </option>
  </select>
</template>

<script>
export default {
  props: {
    attributes: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data: function() {
    return {
      selected: ""
    }
  }
}
</script>

<style scoped>
</style>

Answer 1:

还是有很多的,我不是下面的邮编,但我觉得你的问题的要点是如何体现selected从属性<my-select>通过对组件<select-container>组件。 如果是这样的话,那么最简单的方法可能只是增加一个value并发出input事件。

在模板中,添加事件处理程序为本地<select>

<select v-model="selected"  @input="onInput">

然后,在代码中,反映该事件到父。 此外,一定要接受一个value从父属性。

export default {
  props: {
    value: null,
  },
  data: function() {
    return {
      selected: this.value
    }
  },
  methods: {
    onInput() {
      this.$emit("input", this.selected)
    }
  },
  watch: {
    value(newValue) {
      this.selected = newValue;
    }
  }
}

然后,家长可以简单地使用传统的v-model结合。

<my-select v-model="select"/>


文章来源: Vue2: handling multi-child prop synchronization with models