Question

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

我查看了几个示例和文档，并能够创建一个有效的示例。

我想去的是，从父应用程序中删除this.layout和toggleLayout()，然后放入<toggle-view v-on:layout="toggleLayout" route="checklist"></toggle-view>并定义div#list-content和{{1 }}仅在相应的组件按钮被激活时才会显示。有可能吗？

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

感谢您的宝贵时间和投入。

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;
        }
    },
});

Answer 1

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

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

在组件中调度事件（如您已经做的那样）是处理此事件的正确方法。

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

从Vue.js中的组件更改父级的布局

1 个答案: