Question

这可能不是Vue的处理方式，但是在React中，如果我想制作一个FancyList组件，我可以做类似的事情

const FancyList : React.SFC<{},{}> ({children}) => (
    <ul>
        {...children}
    </ul>
);

const FancyListItem : React.SFC<{text: string}, {}> ({children}) => <li>{...children}</li>

const App = React.SFC<{},{}> () => (
    <FancyList>
        <FancyListItem>foo</FancyListItem>
    <FancyList>
);

这将呈现一个<ul>带有<li>个孩子的情况。我正在尝试在Vue中做类似的事情，但是要让孩子走来走去似乎不是一件容易的事，至少从我在文档中可以看到的情况来看。这是我在父组件中尝试过的。我已将FancyListItem组件注册到父级和根级。在父组件中，模板看起来像这样

<ul>
  <li v-for child in $root.$children>
</ul>

或这个

<ul>
  <li v-for child in children>
</ul>

模板的根目录如下所示

<FancyList>
  <FancyListItem>Some Text</FancyListItem>
  <FancyListItem>Some Other Text</FancyListItem>
</FancyList>

无论哪种情况，我都无法呈现给ul。

Answer 1

您是对的，这不是 Vue 的方式。可以使用slots：

这使您可以编写如下组件：
<navigation-link url="/profile">
  Your Profile
</navigation-link> 

然后在<navigation-link>的模板中，您可能会：

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

https://vuejs.org/v2/guide/components-slots.html

Answer 2

Vue实现此目的的方法是：

fancyListItem.vue：

<template>
  <li>
     <slot></slot>
  </li>
</template>

fancyList.vue：

<template>
  <ul>
    <slot></slot>
  </ul>
</template>

根：

<template>
  <fancy-list>
       <fancy-list-item v-for="item in items" :key="item.id">
          {{ item.text }}
       </fancy-list-item>
  </fancy-list>
</template>
<script>
export default {
  components: {
    FancyList: ()=>import('fancyList.vue'),
    FancyListItem: ()=>import('fancyListItem.vue')
  },
  data(){
    return {
      items: [
        //...items
      ]
    }
  }
}
</script>

在Vue组件中以道具的形式访问孩子

2 个答案: