特定自定义 Vue 组件的方法

Question

我创建了一个自定义 Vue 组件。

Vue.component('select2', {
    props: ['apiurl', 'id', 'value'],
    template: '#select2-template',
    mounted: function(){
        var vm = this
        var apiURL = vm.$options.propsData['apiurl']
        $(this.$el).select2({
            placeholder: "Select an option",
            allowClear: true,
            templateResult: dropdownTemplate,
            templateSelection: dropSelection,
            ajax: {
                url: function(params){
                    url = 'api/variable/' + apiURL
                    if(params.term) url = 'api/variable/' + apiURL + '/' + params.term
                    return url
                }
            }
        })
        .on('change', function(){
            vm.$emit('input', this.value)
        })
        //Check if it has a value assigned
        if (vm.$options.propsData['value'] && vm.$options.propsData['value'] != ''){
            element = $(this.$el)
            $.ajax({
                type: 'GET',
                url: 'path/' + apiURL + '/' + vm.$options.propsData['value']
            }).then(function(data) {
                var option = new Option(data.results[0].label, data.results[0].id, true, true)
                element.append(option).trigger('change')
                element.trigger({
                    type: 'select2:select',
                    params: {
                        data: data.results
                    },
                    templateResult: dropdownTemplate,
                    templateSelection: dropSelection
                })
            })
        }
    },
    watch: {
        value: function(value){
            var apiURL = this.$options.propsData['apiurl']
            var element = $(this.$el)
            $.ajax({
                type: 'GET',
                url: 'path/' + apiURL + '/' + value
            }).then(function(data) {
                var option = new Option(data.results[0].label, data.results[0].id, true, true)
                element.append(option).trigger('change')
                element.trigger({
                    type: 'select2:select',
                    params: {
                        data: data.results
                    },
                    templateResult: dropdownTemplate,
                    templateSelection: dropSelection
                })
            })
        },
doThis: function(){
   console.log('b')
}
    },
    methods: {
        doThis: function() {
            console.log('a')
        }
    }
})

我的组件按预期工作，但我希望我的一些自定义组件在我更改值时执行某些功能。例如：

        <select2 v-model="SomeModel" style="width: 125%;" apiurl="SomeModel" @change="doThis()">
        </select2>

并非我所有的自定义组件都将实现它，但我确实有一些希望在选择特定值时以特定方式运行。可以想象，我的自定义组件是 Select2。 @change 在我的自定义组件中不起作用。

Answer 1

每次需要调用时发出变化 @change:

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

组件不调用也没关系

特定自定义 Vue 组件的方法

Methods for specific custom Vue components

jquery-select2

vue.js