如何在vue中使用children？

Question

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

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

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

并且在 MyComponent 文件中

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

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

Answer 1

您将要使用 Slots。

这是一个取自 vuejs 文档的例子

组件模板：

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

代码：

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

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

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

How to use children in vue?