Question

我试图将Bootstrap Select2放入Vue包装器中。不知何故，我的代码工作。但这对我来说似乎不合适。

我在这里找到了一个引用https://vuejs.org/v2/examples/select2.html 在VueJS网站示例中，el为空。我没有坚持这个概念，在新的Vue部分，他们包括一个模板，因为我的el还有侧边栏和其他东西。我做的是我添加了一个

<admin-access></admin-access>

到HTML中的一个部分。

我认为我的组件是嵌套的，如果它在VueJS中是正确的，我会持怀疑态度。

有更好的方法对此进行编码吗？

模板

<template id="select2-template">
    <select>
        <slot></slot>
    </select>
</template>

<template id="admin-access">
    <div>
        <transition name="access" enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight" appear>
            <div class="box box-solid box-primary" v-if="admin" key="create">
                <div class="box-header with-border">
                    <i class="fa fa-text-width"></i>
                    <h3 class="box-title">Create Admin</h3>
                </div>
                <div class="box-body">
                    <form action="" class="search-form">
                        <div class="form-group">
                            <label for="search_user_admin">Search User</label>
                            <select2 name="search_user_admin" id="search-user-admin" class="form-control select2" :options="options" v-model="selected">
                                <option disabled value="0">Select one</option>
                            </select2>
                        </div>

                    </form>
              </div>
            </div>
        </transition>
    </div>
</template>

脚本

Vue.component('admin-access', {
    template: '#admin-access',
    props: ['options', 'value'],
    created: function() {
        $('#search-user-admin').select2({
            placeholder: "Select User",
            allowClear: true
        });
    },
    data: function() {
        return {
            admin : true,
            selected : false
        }
    },
});

Vue.component('select2', {
    template: '#select2-template',
    data: function() {
        return {
            selected: 0,
            options: [
                { id: 1, text: 'Hello' },
                { id: 2, text: 'Darkness' },
                { id: 3, text: 'My' },
                { id: 4, text: 'Old' },
                { id: 5, text: 'Friend' }
            ]
        }
    },
    mounted: function() {
        var vm = this;
        $(this.$el).select2({
            data: this.options,
            placeholder: "Select an option",
        })
        .val(this.value)
        .trigger('change')
        .on('change', function () {
        vm.$emit('input', this.value);
      });
    },
    watch: {
        value: function (value) {
            $(this.$el).val(value).trigger('change');
        },
        options: function (options) {
            $(this.$el).select2({ data: options });
        }
    },
    destroyed: function () {
        $(this.$el).off().select2('destroy');
    }
});

var admin = new Vue({
    el: '#app'
});

Answer 1

首先嵌套组件没有任何问题。但是你必须记住，嵌套它们，或者只是一般而言，只是将通用的html组件（例如select到Vue组件）包装在渲染中是非常昂贵的，特别是当你将它们嵌套时。通常当你的所有组件只是包装一个带有某些样式的简单HTMl元素时，为了性能起见，你应该只使用通用HTML和类。

另外，我试图摆脱Vue Components内部的所有jQuery代码。 Vue提供了jQuery所具有的所有功能，它只会进一步增加加载时间。

VueJS中的嵌套组件和正确的包装技术

1 个答案: