0
我试图扩展select2的例子，使其更实用。到目前为止，我已经添加了多选功能，并尝试允许自定义select2配置。Vue.js：在道具对象中传递匿名函数
https://jsfiddle.net/5ytm3LL6/
似乎道具对象的该功能的属性时递给部件被剥离。
什么是家长给js函数提供构件配置的解决方案？
我有点困惑，因为嵌入式版本实际上显示params在内置控制台输出中正确传输，而jsfiddle浏览器控制台输出没有。 但是，两个版本都不会将函数传递给select2小部件。
Vue.component('select2', {
props: ['options', 'value', 'params'],
template: '<select><slot></slot></select>',
mounted: function() {
var vm = this, params = $.extend({}, this.params || {});
console.log(this.params, params);
params.data = this.options;
$(this.$el).val(this.value).select2(params).on('change', function() {
vm.$emit('input', $(vm.$el).val());
});
},
watch: {
value: function (value) {
var $el = $(this.$el);
if (!_.isEqual($el.val(), value)) {
$el.select2('val', value);
}
},
options: function (options) {
$(this.$el).select2({ data: options });
}
},
destroyed: function() { $(this.$el).off().select2('destroy'); }
});
new Vue({
el:'#app',
data: function() {
return {
value: 'a',
options: [{id:'a', label:'A'}, {id:'b', label:'B'}],
params: {
test: 'TEST',
formatSelection: function (item) {return item.label;},
formatResult: function (item) {return item.label;}
}
};
}
});<link rel="stylesheet" type="text/css" href="https://unpkg.com/select2/dist/css/select2.css"></style>
<script src="https://unpkg.com/lodash"></script>
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/select2"></script>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<select2 v-model="value" :options="options" :params="params"></select2>
</div>