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

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

我有3个组件，

siderbar

<代码>侧栏项目和

侧栏放置

siderbar.vue是一个包装器，当您可以放置

siderbar项

和

siderbar项

，并且在

siderbar项

内部，您也可以放置

siderbar项

例如：

<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>

导出默认值{
道具：['title'，'url'，'icon'，'badge']，
数据（）{
返回{
是否处于活动状态：this.$current\u url==this.url
} 
}
}

和侧边栏-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>

我在侧边栏中做了一个随机激活的项目。
如果侧边栏放置（侧边栏项）数据的任何子项处于活动状态：true，则侧边栏放置数据处于打开状态也为true

因此，它以黄色和开放的颜色显示

结果:


但现在，这两个都在刷新页面关闭
 你能添加小提琴或github链接吗？这样做会更容易帮助你。完成了。我希望这有助于理解。谢谢也许可以看看Evan You（vue.js的创建者）对您的案例的看法：您可以添加小提琴或github链接吗？这样做会更容易帮助你。完成了。我希望这有助于理解。谢谢也许可以看看Evan You（vue.js的创建者）对您的案例的看法：
<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>