vue.js - 是否可以在 vueJS 中将数据从插槽组件传递到父级？

Question

我是 VueJS 的新手，我正在尝试做这样的事情

我有 3 个组件，siderbar; siderbar-item和sidebar-drop

siderbar.vue 是一个包装器，当你可以放siderbar-itemand时，你也可以sidebar-drop在里面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>

侧边栏项目.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>

和侧边栏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 类表明该项目处于活动状态。伟大的。

现在我正在尝试了解sidebar-drop他的至少一个孩子是否有数据“处于活动状态”为真，将is_open侧边栏下拉父数据更改为真。

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

• Ul li 新闻处于活动状态...有效！
• Ul li parent drop 已打开...不工作

有可能做到吗？

感谢大家！

更新：

我把它放在提琴手更清楚： https ://jsfiddle.net/h35qy2zs/

我在侧边栏项目中做了一个随机的 is_active。如果 sidebar-drop (sidebar-item) 数据的任何子项 is_active:true，则 sidebar-drop 数据 is_open 也为 true。

所以，它显示为黄色并打开

结果：

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

标签： vue.js