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组件的方法

1 个答案: