Question

我是VueJS的新手，我正在尝试做类似的事情

我有3个组成部分，siderbar； siderbar-item和sidebar-drop

当您可以放置siderbar-item和sidebar-drop时，siderbar.vue是一个包装器，在sidebar-drop内您也可以放置sidebar-item

例如：

<sidebar>

    <sidebar-item url="myurl" title="Dashboard" icon="fas fa-tachometer-alt" badge=""></sidebar-item>



    <sidebar-drop title="News" icon="fas fa-tachometer-alt">
        <sidebar-item url="myurl_news" title="News list" icon="fas fa-tachometer-alt" badge=""></sidebar-item>
        <sidebar-item url="myurl_news_add" title="Add News" icon="fas fa-tachometer-alt" badge=""></sidebar-item>
    </sidebar-drop>


    <sidebar-drop title="Categories" icon="fas fa-tachometer-alt">
        <sidebar-item url="myurl_categories" title="Categories List" icon="fas fa-tachometer-alt" badge=""></sidebar-item>
    </sidebar-drop>


</sidebar>

sidebar.vue非常简单：

<aside>
    <slot></slot>
</aside>

sidebar-item.vue

<template>
     <ul class="menu-list" >
        <li>
            <a :href="url"  :class="{'is-active': is_active }">
                <span class="icon"><i v-if="icon" :class="icon"></i></span>
                {{ title }}
                <span v-if="badge" class="button badge is-info is-small is-pulled-right "> {{ badge }}</span>
            </a>
        </li>
    </ul>
</template>

<script>
export default {
    props: ['title', 'url', 'icon', 'badge'],

    data() { 
        return {
            is_active:  this.$current_url === this.url
         } 
    }
}
</script>

和sidebar-drop.vue

<template>
    <ul class="menu-list" v-if="title">
        <li @click="openMenu"  :class="{'is-open': is_open}">
            <a class="">
                <span v-if="icon" class="icon"><i class="fas fa-tachometer-alt"></i></span>
                {{ title }}
                <span class="badge is-pulled-right" style=""> <i class="fas fa-chevron-left"></i> </span>
            </a>
            <slot></slot>  
        </li>
    </ul> 
</template>

<script>

export default {
    props: ['title', 'icon'],


    data() {
       return {
          is_open: false,
       }
    },

    methods: {
        openMenu(){
            this.is_open = !this.is_open;
        },
    }

}
</script>

效果很好，但是我有一个小问题。如果您注意到，sidebar-item有一个名为“ is_active”的数据，那么它只会放置一个CSS类，表明该项目处于活动状态。很好。

现在，如果他的至少一个孩子的数据“处于活动状态”为true，那么我正尝试进入sidebar-drop，将is_open侧边栏放置父数据更改为true。

示例：我单击“新闻”项。

Ul li新闻正在发布中……有效！
Ul li父子站已打开...不起作用

有可能做到吗？

谢谢大家！

更新：

我把它放在Fiddler中更清楚： https://jsfiddle.net/h35qy2zs/

我在侧边栏项目中执行一个随机的is_active。如果任何侧边栏放置数据（sidebar-item）的子对象为is_active：true，则侧边栏放置数据is_open也为true。

所以它显示为黄色并打开

结果：

但是现在，两者都在刷新页面关闭。

是否可以在vueJS中将数据从插槽组件传递给父组件？

0 个答案: