javascript - 在 Vue.js 中更改父组件的布局

Question

我正在尝试将 UI 元素转换为组件，以重用它。它有两个按钮，用于切换父应用程序中两个 DOM 元素的可见性。该值保存在本地存储中。

我查看了几个示例和文档，并且能够创建一个工作示例。

https://jsfiddle.net/d6xbts4h/2/

我想要的是删除 this.layout和toggleLayout()从父应用程序中输入 <toggle-view v-on:layout="toggleLayout" route="checklist"></toggle-view>并定义 div#list-content和div#grid-content仅当激活相应组件按钮时才会显示。这可能吗？

我想摆脱父应用程序中的附加方法的原因是懒惰。我只想处理组件中的逻辑。

感谢您的时间和投入。

Vue.component('toggle-view', {
    props: ['route'],
    data: function () {
        return {
            // load value from local storage or set default value
            layout: Vue.ls.get(this.route + '__layout','list'), // list|grid
        }
    },
    template: `<div class="btn-group" role="group" aria-label="Basic example">
    <button id="list-toggle" v-on:click="setLayout('list', $event)" type="button" :class="[layout == 'list' ? 'active' : '' , 'btn', 'btn-secondary']"><i class="material-icons">view_list</i></button>
    <button id="grid-toggle" v-on:click="setLayout('grid', $event)" type="button" :class="[layout == 'grid' ? 'active' : '' , 'btn', 'btn-secondary']"><i class="material-icons">view_module</i></button>
    </div>`,

    mounted: function(){
        // init the layout and $emit it to parent
        this.setLayout(this.layout)
    },

    methods:{
        setLayout: function(layout,event){
            this.$emit('layout', layout);
            this.layout = layout;
            Vue.ls.set(this.route + '__layout',layout);
            console.log(layout);
        }
    },
});


var app = new Vue({
    el: '#app',
    data: {layout:null},
    methods:{
        toggleLayout: function(layout){
            this.layout = layout;
        }
    },
});

<div id="app">
        <toggle-view v-on:layout="toggleLayout" route="checklist"></toggle-view>
        <div v-if="layout === 'list'" id="list-content" class="list">
            Liste
        </div>
        <div v-if="layout === 'grid'" id="grid-content" class="grid">
            grid
        </div>
</div>

Answer 1

您的子组件不应该知道父组件。 将子组件“耦合”到父组件是一种不好的做法。

您应该在父组件中编写附加方法，因为这是受用户操作影响的组件。

在组件中分派(dispatch)事件(就像您已经做的那样)是处理此问题的正确方法。

在较旧的 Vue 版本中可以执行此操作，但由于警告而已被删除。 (https://012.vuejs.org/guide/components.html#Inheriting_Parent_Scope)