问Vue包装器示例

EN

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

在“小提琴”的第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);

  })

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

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

由于v-model的工作方式，它的行为方式是这样的。你所看到的是一个双向绑定。如果selected在v-model="selected"中的值发生变化，则该值将向下推到组件中。

当调用vm.$emit('input', this.value)时，它告诉父变量更新任何正在侦听更改的变量，在本例中，selected会被推回组件，从而更改其值。

为了更简单地理解，这是事件的顺序：

1. 选择2值变化
2. select2值更改触发事件发射。
3. 父级接收事件并更新selected。
4. 组件的值被分配给selected的新值
5. 该值的监视程序将被触发，并使用新值更新select2。

不过，问得好。

警告:这样做是可以理解的，糟糕的做法。当与单向绑定一起使用时，它会破坏它的悲伤的方式。

请注意模板中如何使用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>

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

来源