特定自定义 Vue 组件的方法

Posted 2023-05-07

【中文标题】特定自定义 Vue 组件的方法

【英文标题】：Methods for specific custom Vue components

【发布时间】：2020-08-28 14:18:53

【问题描述】：

我创建了一个自定义的 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 在我的自定义组件中不起作用。

【参考方案1】：

每次您需要致电@change时发出更改：

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

组件不调用也没关系。

【讨论】：

感谢您的回答。我这样做了，现在我收到一条错误消息，提示 doThis() 不存在。我也尝试将其放入 watch，但我没有运气。

你定义了doThis方法吗？

是的，在我的组件的内部方法中。我也在手表里面定义了它。请注意更新的问题。

你需要在你调用<select2>的组件上定义doThis，而不是在select2里面

这不是我在做的吗？抱歉，如果这是一个愚蠢的问题，我对此很陌生。