Vue.js：在页面中多次包含相同的组件实例

Question

Vue.js：在页面中多次包含相同的组件实例

我想要完成的是：我有一些显示在页面上的过滤器来过滤页面上显示的产品。在移动设备中，我想将这些过滤器隐藏在一个按钮后面，一旦按下该按钮，就会在侧面滑出菜单中显示过滤器。

虽然我可以在页面上复制相同的组件两次，但组件不是完全相同的实例，即点击过滤器会触发该功能来过滤页面上的产品，但它设置了自己的数据属性，我我曾经说过“如果数据属性‘selected’为真，则向组件添加一个‘selected’类。当我调整窗口大小时，组件的另一个实例没有将‘selected’数据属性标记为‘true’ .

我期待这一点，因为，从文档：

请注意，当单击按钮时，每个按钮都保持自己的独立计数。这是因为每次使用组件时，都会创建它的一个新实例。

...但是最好的方法是什么？

我的想法是只在组件上设置一个“移动”类，而 .mobile css 会以不同的方式设置组件的样式，但我需要让它在嵌套的位置突破。

例如

<body>
   <header>
      <!-- desktop -->
      <guitar-filters>
   <header>

   <!-- mobile -->
   <guitar-filters>
</body

Run Code Online (Sandbox Code Playgroud)

这是我的 Vue 组件“guitar-filters”，它显示了几个名为“instrument-filter”的组件：

Vue.component('guitar-filters', {

    data: function() {

        return {
            isMobile: false
        }

    },

    mounted: function() {

        var comp = this;
        this.setIsMobile();

        window.addEventListener('resize', function() {
            comp.setIsMobile();
        });

    },

    methods: {

        setIsMobile: function() {

            this.isMobile = (window.innerWidth <= 900) ? true : false;

        }

    },

    template: `
        <ul class="filters" :class="{mobile: isMobile}">

        <li>
            All
        </il>

        <li>
            Series
            <ul>
                <instrument-filter filter-by="series" filter="All">All</instrument-filter>
                <instrument-filter filter-by="series" filter="Frontier">Frontier</instrument-filter>
                <instrument-filter filter-by="series" filter="Legacy">Legacy</instrument-filter>
                <instrument-filter filter-by="series" filter="USA">USA</instrument-filter>
            </ul>
        </li>

        <li>
            Body Shape
            <ul>
                <instrument-filter filter-by="bodyType" filter="All">All</instrument-filter>
                <instrument-filter filter-by="bodyType" filter="Concert">Concert</instrument-filter>
                <instrument-filter filter-by="bodyType" filter="Concertina">Concertina</instrument-filter>
                <instrument-filter filter-by="bodyType" filter="Concerto">Concerto</instrument-filter>
                <instrument-filter filter-by="bodyType" filter="Orchestra">Orchestra</instrument-filter>
            </ul>
        </li>

    </ul>
    `

});

Run Code Online (Sandbox Code Playgroud)

仪器过滤器组件：

Vue.component('instrument-filter', {

    data: function() {

        return {
            selected: false
        }

    },

    props : [
        'filterBy',
        'filter'

    ],

    methods: {

        addFilter: function() {
            this.$root.$emit('addFilter',{filterBy: this.filterBy,filter: this.filter});
        },

        clearFilter: function() {
            this.$root.$emit('clearFilter',{filterBy: this.filterBy,filter: this.filter});
        }

    },

    template: `
        <li :class="{ 'selected' : selected }" @click="selected = !selected; selected ? addFilter() : clearFilter()"><slot></slot></li>
    `

});

Run Code Online (Sandbox Code Playgroud)

.css：

ul.filters > li > ul > li.selected::before {
   content: "??";
   ...
}

Run Code Online (Sandbox Code Playgroud)

目标是让过滤器在两个实例中都具有“selected”类。如果我单击“concert”主体形状，然后将窗口大小调整为移动断点，则该过滤器组件的另一个实例也将被选中。

编辑：我可以破解这个。我可以使用 javascript 移动组件的一个实例，但我正在学习 Vue，并希望以 Vue 方式和最佳实践来做到这一点。

Answer 1

Nig*_*ing 5

有许多不同的方法可以处理这个问题。看起来您已经开始了事件总线路径。另一种选择是使用共享应用程序状态（请参阅Vuex）。

我所做的类似于共享状态，但只是使用 app （同样适用于公共父组件）数据。共享对象被传递给组件的两个实例。如果选择了一个项目，则会切换相应的条目。由于对象是共享的，两个组件保持同步。

如果没有通用的父组件，您就必须查看事件或状态。

看一看，看看是否有帮助。

Vue.component('guitar-filters', {

    props: [ 'data' ],

    data: function() {
        return {
            isMobile: false
        }
    },

    mounted: function() {
        var comp = this;
        this.setIsMobile();
        window.addEventListener('resize', function() {
            comp.setIsMobile();
        });
    },

    methods: {
        setIsMobile: function() {
            this.isMobile = (window.innerWidth <= 900) ? true : false;
        }
    },

    template: `
        <ul class="filters" :class="{mobile: isMobile}">

        <li>
            All
        </il>

        <li>
            Series
            <instrument-filters :list="data.seriesFilters"/>
        </li>

        <li>
            Body Shape
            <instrument-filters :list="data.bodyFilters"/>
        </li>

    </ul>
    `

});

Vue.component('instrument-filters', {

    props : [ 'list', ],

    methods: {
        toggle(toggleItem) {
          let itemInList = this.list.find((item) => item.value === toggleItem.value);        
        	itemInList.selected = !itemInList.selected;       
        },
    },

    template: `
    		<ul>
          <li v-for="item in list" :class="{ 'selected' : item.selected }" @click="toggle(item)">{{ item.label }}</li>
        </ul>
    `

});

new Vue({
  el: "#app",
  data: {
    filterData: {
      seriesFilters: [
        { label: 'All', value: 'All', selected: false },
        { label: 'Frontier', value: 'Frontier', selected: false },
        { label: 'Legacy', value: 'Legacy', selected: false },
        { label: 'USA', value: 'USA', selected: false },
      ],
      bodyFilters: [
        { label: 'All', value: 'All', selected: false },
        { label: 'Concert', value: 'Concert', selected: false },
        { label: 'Concertina', value: 'Concertina', selected: false },
        { label: 'Concerto', value: 'Concerto', selected: false },
        { label: 'Orchestra', value: 'Orchestra', selected: false },
      ],
    }
  },
});

Run Code Online (Sandbox Code Playgroud)

ul {
 margin-left:20px; 
}
ul > li {
  cursor: pointer;
}
ul.filters > li > ul > li.selected::before {
   content: "??";
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <header>
      <!-- desktop -->
      <guitar-filters :data="filterData" />
   </header>

   <!-- mobile -->
   <guitar-filters :data="filterData" />
</div>

Run Code Online (Sandbox Code Playgroud)

小提琴：https : //jsfiddle.net/nigelw/jpasfkxb

归档时间：	6 年，9 月前
查看次数：	9327 次
最近记录：	6 年，9 月前