Question

我实际上有两个全局组件，一个用于Admin，另一个用于Modal。 Admin组件有一个名为Page的子comp，而Page comp有其他child。我想通过插槽将内容直接传递给Page comp。像这样：

app.js

new Vue({
    el: '#app',
    components: { Admin, Modal }
})

Admin.vue

<template>
  <div>
    <page>
      <slot></slot>
    </page>
  </div>
</template>

export default {
  components: { Page }
}

Page.vue

<template>
<div>
   <page-header>
        <slot name="page-header">
            <h1 class="page-title">
                <slot name="page-title">
                    Page Title
                </slot>
            </h1>
        </slot>
    </page-header>
    <page-body>
        <slot>
            Page Body
        </slot>
    </page-body>
    <page-footer>
        <slot name="page-footer">
            Page Footer
        </slot>
    </page-footer>
</div>
</template>

export default {
        components: {
            pageHeader,
            pageBody,
            pageFooter
        }
}

的index.html

<admin>
    <div slot="page-header">
       Header Test
    </div>
    Body Test
    <div slot="page-footer">
      Footer Test
    </div>
</admin>

我不需要使用Page作为全局组件，请知道吗？希望你明白我在寻找...

由于

Answer 1

我不认为插槽是为了做到这一点而设计的。如果你需要在父母和孩子之间保持数据，那么使用@Belmin Bedak建议的任何道具。当你将道具传递给一个组件时，它将被所有孩子使用。如果你需要在前端保持状态，我强烈建议使用Vuex作为所有组件的数据源（仅当数据分散在组件中变得更复杂时才使用）。

组件和插槽方法

1 个答案: