Question

有一个很好的examples of integrating vue with select2。

我有一个问题。

如果我们看一下代码的这一部分：

mounted: function () {
    var vm = this
    $(this.$el)
      // init select2
      .select2({ data: this.options })
      .val(this.value)
      .trigger('change')
      // emit event on change.
      .on('change', function () {
        vm.$emit('input', this.value)
      })
  }

我不明白，为什么当我们改变select2的值时，this.value也会改变。我期待一个像以下的记录：

 .on('change', function () {
    this.value = $(this.$el).val()
    vm.$emit('input', this.value)
  })

Answer 1

由于v-model的工作方式，它的行为方式如此。您所看到的是双向绑定。如果selected中v-model="selected"的值发生更改，则该值将下推到该组件。

当调用vm.$emit('input', this.value)时，它会告诉父级更新正在侦听更改的变量，在这种情况下selected，它将被推回到组件，以使其值得到更改。

为了使其更容易理解，这是一系列事件：

select2的值更改
select2值更改触发事件发射
父母收到该事件并更新selected
将组件的值分配给新值selected
触发值的观察者并使用新值

好问题。

Answer 2

注意模板中select2组件的使用方式：

<select2 :options="options" v-model="selected">
  <option disabled value="0">Select one</option>
</select2>

在使用v-model的Vue.js中，组件可以简化为：

<your-component
    :value="selected"
    @input="value => { selected = value }">
</your-component>

因此，每次从组件中发出事件时，都会在父组件处更改值。

Source

Answer 3

在写完我之前的答案之后，我意识到我错过了一些重要的事情：上下文。

在jsfiddle的第5行，有这一行：

var vm = this，为什么？

这是因为稍后，在执行vm.$emit时，this.$emit将无效;背景已经改变。

  .on('change', function () {
      //this = select2 element

      vm.value // == 1
      this.value // == 2
      vm.$emit("input", this.value);

  })

emit事件的值不是组件的值，而是select2元素的值。

虽然组件上尚未更改value，但新值已广播给父母。

Vue包装器示例

3 个答案: