时间戳

首页 > 解决方案 > vue中如何使用children？

vue.js - vue中如何使用children？

问题描述

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

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

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

在 MyComponent 文件中

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

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

标签： vue.jswrapper

解决方案

您将需要使用Slots。

这是取自 vuejs doc 的示例

组件模板：

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

编码：

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

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

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

推荐阅读