Javascript Vue组件$emit触发两次

我最近尝试在一些实际应用程序中重新利用我的Vue组件，以使用

删除不必要的重复项和混乱

但我在这么做时遇到了麻烦。几个小时后，我设法“完成”了它，但现在事件发生了两次，我不知道确切的原因

我已经做了一个基本设置来显示问题：

Vue.component（“bs选择”{
模板：
`
{{label}}
`,
道具：[“值”、“标签”、“选项”]，
方法：{
chosenOption（val）{
这是.$emit（“输入”，val）；
}
}
});
组件（“选择2”{
模板：
`
选择。。。
{{value}}
{{option.text}
`,
道具：[“价值”，“选项”]，
挂载：函数（）{
const vm=这个；
$（vm.$el）
.select2（）
.on（“更改”，函数（）{
console.log（“更改”，vm.$el.value）；
vm.$emit（“输入”，vm.$el.value）；
});
},
观察：{
值：函数（val）{
$（此。$el）
.val（val）
.触发（“变更”）；
}
}
});
新Vue({
el:“应用程序”，
数据：{
测试：“bug”，
选项：[
{
值：“你好”，
文字：“你好”
},
{
值：“bug”，
文字：“Bug”
}
]
}
})

*{
字体系列：Arial；
字体大小：10px；
}
div{
}

将“test”变量设置为“bug”（双向检查）
{{test}}
事件在控制台中触发两次。。。

我不确定您到底想在这里做什么，但我猜您触发了onchange事件两次，一次是在它实际发生变化时，另一次是在watcher中。无论如何，当有如下vue解决方案可用时，您实际上不需要使用这样的侦听器：

 <div id="app">
  <bs-select :value="test" v-on:change-value="test = $event" :options="options"></bs-select>
  <br><br>
  {{ test }}

  <br><br>

  <button @click="test = 'bug'">
  Set 'test' variable to 'bug'
  </button>
</div>

<div>
Event is firing twice in console...
</div>

{{test}}



将“test”变量设置为“bug”
事件在控制台中触发两次。。。

组成部分：

Vue.component("bs-select",{
template:
 `<select :value="value" v-on:change="changeVal" style="width: 100%">
    <option value="" selected disabled>Choose...</option>
    <option v-if="!options">{{ value }}</option>
    <option v-for="option in options" :value="option.value">{{ option.text }}</option>
  </select>`,
  props: ["value", "options"],
  methods: {
    changeVal: function(event) {
        this.$emit('change-value', event.target.value)
    }
  }
});

new Vue({
  el: "#app",
  data: {
    test: "bug",
    options: [
    {
      value: "hello",
      text: "Hello"
    },
    {
      value: "bug",
      text: "Bug"
    }
    ]
  }
})

Vue.component（“bs选择”{
模板：
`
选择。。。
{{value}}
{{option.text}
`,
道具：[“价值”，“选项”]，
方法：{
changeVal：函数（事件）{
此.$emit（'change-value'，event.target.value）
}
}
});
新Vue({
el:“应用程序”，
数据：{
测试：“bug”，
选项：[
{
值：“你好”，
文字：“你好”
},
{
值：“bug”，
文字：“Bug”
}
]
}
})

---

在询问了我的一些朋友后，有人发现“更改”触发器必须在更新之前处于

状态

因此，解决的代码如下所示：

 <div id="app">
  <bs-select :value="test" v-on:change-value="test = $event" :options="options"></bs-select>
  <br><br>
  {{ test }}

  <br><br>

  <button @click="test = 'bug'">
  Set 'test' variable to 'bug'
  </button>
</div>

<div>
Event is firing twice in console...
</div>


Vue.component（“bs选择”{
模板：
`
{{label}}
`,
道具：[“值”、“标签”、“选项”]，
方法：{
chosenOption（val）{
这是.$emit（“输入”，val）；
}
}
});
组件（“选择2”{
模板：
`
选择。。。
{{value}}
{{option.text}
`,
道具：[“价值”，“选项”]，
挂载：函数（）{
const vm=这个；
$（vm.$el）
.select2（）
.on（“更改”，函数（）{
console.log（“更改”，vm.$el.value）；
vm.$emit（“输入”，vm.$el.value）；
});
},
更新之前（）{
$（this.$el）.val（this.value）.trigger（'change.select2'））
}
});
新Vue({
el:“应用程序”，
数据：{
测试：“你好”，
选项：[
{
值：“你好”，
文字：“你好”
},
{
值：“已解决”，
正文：“已解决”
}
]
}
})
*{
字体系列：Arial；
}




{{test}}



将“测试”变量设置为“已解决”
对于现在遇到这种情况的任何人来说，这是让它只开火一次的正确方法

<template>
    <select><slot></slot></select>
</template>
<script>
  module.exports = {
    props: ['options', 'value'],
    mounted: function () {
        console.log(this.options);
        var vm = this;
        $(this.$el)
        // init select2
        .select2({
            data: this.options,
            theme: 'bootstrap',
            width: '100%',
            placeholder: 'Select',
            allowClear: true
        })
        .val(this.value)
        .trigger('change')
        // emit event on change.
        .on('select2:select', function () { // bind to `select2:select` event
            vm.$emit('input', this.value)
        });
    },
    watch: {
        value: function (value) {
            // update value
            $(this.$el)
            .val(value)
            .trigger('change');
        },
        options: function (options) {
            // update options
            $(this.$el).empty().select2({ data: options })
        }
    },
    destroyed: function () {
        $(this.$el).off().select2('destroy')
    }
  }
</script>


module.exports={
道具：['options'，'value']，
挂载：函数（）{
console.log（this.options）；
var vm=这个；
$（此。$el）
//初始化选择2
.选择2({
数据：这是一个选项，
主题：“引导”，
宽度：“100%”，
占位符：“选择”，
allowClear:对
})
.val（此.value）
.trigger（'更改'）
//在更改时发出事件。
.on（'select2:select'，函数（）{//bind to`select2:select`事件
vm.$emit（'input'，this.value）
});
},
观察：{
值：函数（值）{
//更新值
$（此。$el）
.val（值）
.触发（“变更”）；
},
选项：功能（选项）{
//更新选项
$（this.$el）.empty（）.select2（{data:options}）
}
},
已销毁：函数（）{
$（this.$el）.off（）。选择2（'destroy'）
}
}
您完全删除了select2，但这并不能解决问题。我使用select2进行ajax调用、免费键入（标记）等。