Vue 包装器示例答案

【问题标题】：Vue wrapper exampleVue 包装器示例
【发布时间】：2018-02-18 19:00:09
【问题描述】：

有一个很好的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)
  })

【问题讨论】：

标签： vue.js

【解决方案1】：

由于v-model 的工作方式，它的行为方式是这样的。您正在查看的是 2 向绑定。其中v-model="selected"中selected的值如果发生变化，会下推到组件中。

当vm.$emit('input', this.value) 被调用时，它会告诉父级更新任何正在监听变化的变量，在本例中为selected，然后它会被推回组件以使其值发生变化。

为了更容易理解，这是事件的顺序：

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

不过是个好问题。

警告：这是可以理解的糟糕做法。与 1-way 绑定一起使用时，它会破坏它。

【讨论】：

起初我认为这很容易，但现在我意识到这个问题让我认真思考。所有这些信息现在都无法在我的脑海中出现。你似乎比我更了解这一点。您能否解释一下究竟是什么触发了selected 更新（步骤 3）？所以input 事件发出了，下一步是什么？这里没有明确的重新分配。
:value="selected" 是显式分配。它基本上意味着“每当 selected 发生变化时，更新 prop 值”，而组件正在监听 prop 值的变化。
这部分我很清楚，问题是selected 首先是如何在父组件中更改的？什么点或让我们说“连接”vm.$emit('input', this.value) 到父组件中 selected 值的变化？我希望我对您的理解是正确的，我们不只是在兜圈子。
您没有在自己的答案中解释过吗？组件上的@input 监听器调用this.selected = newValue。
是的，我想这就是我所做的。阅读您的回答给我的印象是我什么都不知道，并且出于某种原因根本不了解该过程。谢谢你的时间 Slava。

【解决方案2】：

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

在 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 尚未更改，但新值已广播给父级。

【讨论】：

【解决方案3】：

注意select2 组件在模板中是如何使用的：

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

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

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

因此，每次从组件发出事件时，父组件的值都会发生变化。

Source

【讨论】：