vue 多次调用组件冲突

jsoncode
  • 3.9k

自己封装了一个select的组件,写好了,测试一切正常,然鹅,如果页面调用多次的话,就冲突了。展开一个,所有组件都展开了,选择一个,所有的都跟着变

select 组件

<template id="selectComponent">
    <div class="dropdown">
        <button class="form-control dropdown-toggle text-left" type="button">
            {{selectList[current]&&selectList[current].name}}
        </button>
        <div class="dropdown-menu btn-block" :class="{show:showSelect}">
            <button class="dropdown-item" type="button" v-for="(item,index) in selectList" :data-index="index">{{item.name}}</button>
        </div>
    </div>
</template>
<script>
var dataid = ('selectComponent' + new Date().getTime() + Math.random()).replace('.', '');
var tpEl = getDom('#selectComponent').content.querySelector('.selectComponent');
tpEl.dataset.id = dataid;
Vue.component('selectComponent', {
    template: '#selectComponent',
    data: function() {
        var vm = this;
        return {
            showSelect: false,
            current: 0,
        }
    },
    props: ['list'],
    computed: {
        selectList: function() {
            return this.list;
        }
    },
    mounted: function() {
        var vm = this;
        document.addEventListener('click', function(event) {
            var el = event.target;
            if (el.dataset.id == dataid || el.closest('[data-id=' + dataid + ']')) {
                if (el.classList.contains('dropdown-toggle')) {
                    vm.showSelect = !vm.showSelect;
                } else {
                    if (el.classList.contains('dropdown-item')) {
                        vm.current = el.dataset.index;
                    }
                    vm.showSelect = false;
                }
            } else {
                vm.showSelect = false;
            }
        }, false);
    },
    watch: {
        current: function(index) {
            this.$emit('change', index);
        }
    }
});
</script>

调用方法:
<select-component @change="change" :list.sync="[{value:1,name:'test'}]"></select-component>
回复
阅读 3k
1 个回答

vue有click也是事件委托,为什么混着用原生的?如果理不清两者的区别,尽量不要混着用,能用vue的事件系统,就用vue,框架会给你优化的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏