vue.js - 如何将组件中的值绑定到 App.vue 中的元素？

Question

我想从每个页面组件中的属性或值将一个类绑定到 App.vue 中的一个元素。有点与传递道具相反？不完全是 chld -> 父母，绝对不是父母 -> 孩子。我正在尝试使用路由参数，但到目前为止，我只能通过刷新获得要绑定的值。是否有针对这种方法的修复或更好的 vue 方法来做到这一点？

应用程序.vue：

<template>
    <div id="app">
        <app-header />
        <main> ... <!-- objective: <main :class="[ get a value from each component loaded into router-view ]"> -->
            <router-view />
        </main>

    </div>
</template>


<script>

    export default {
        data () {
            return {
                name: 'App',
                mainClass: "", // update this value per route component
            }
        },
        created: function() {
            // console.log("this.$routes.params.id", this.$route.params.id); // undefined
            this.mainClass = this.$route.name.toLowerCase(); // √
        }
    }

</script>

画廊.vue：

<script>

    import Gallery from '../../data/Gallery.json';

    export default {
        name: 'Gallery',
        data () {
            return {
                h1: 'Gallery',
                Gallery: Gallery,
                objID: "",
                mainClass: ""
            }
        },
        created: function() {
            var Gallery = require('../../data/Gallery.json');
            for (let key in Gallery) {
                Gallery[key].id = key;
                !this.objID ? this.objID = key : ""
            }
        }, // created
        methods: {
            setFeaturedImage: function(objID) {
                this.objID = objID;
            }
        }
    }
</script>

标签： vue.js

Answer 1

为此使用计算属性

   computed: {
        mainClass: function() {
            return this.$route.name.toLowerCase();
        }
    }