如何在Vue中使用子组件？

Question

我在不同项目中使用 React.js 和 Vue.js 来作为前端技术。

在 React 中，我可以像这样使用 MyComponent 包装模板。

    <MyComponent>
      <div>Here</div>
    </MyComponent>

在我的组件文件中

const MyComponent = ({children}) {
    return (
         <div className="my-component">{children}</div>
    )
}

我该如何在Vue.js中使用这种简单的技巧？

- ericobi

---

你需要使用插槽（Slots）。请从这里阅读更多信息：https://vuejs.org/v2/guide/components-slots.html - phuwin

Answer 1

您需要使用插槽。

这里是从vuejs文档中摘取的一个例子

组件模板：

<a :href="url">
  <slot></slot>
</a>

代码：

<navigation-link url="/profile">
  Your Profile
</navigation-link>

<slot></slot>将被替换为组件标签内的内容。它将呈现为：

<a url="/profile">
  Your Profile
</a>

- phuwin