Question

在React中我会做这样的事情：

//ParentComponent.js
(<div>
  {this.props.children}
</div>)

//ChildComponent.js
(<div>
  I'm the child!
</div>)

//App.js
import ParentComponent
import ChildComponent

<ParentComponent>
  <ChildComponent />
  <span>Other element</span>
</ParentComponent>

我知道他们是不同的东西，但我怎么能在Vue做这样的事情？我想在ChildElement的内容中传递ParentComponent，在ParentComponent我必须能够将其内容放在某处。

最接近这个想法的是什么？

Answer 1

您可以使用slots。

Vue.component("parent",{
  template:"<div><h1>I'm the parent component</h1><slot></slot></div>",
})

Vue.component("child", {
  template: "<div><h2>I'm the child component</h2></div>"
})

new Vue({
  el:"#app"
})

<div id="app">
  <parent>
    <child></child>
  </parent>
</div>

Example

我们如何创建嵌套的Vue组件，将其他元素作为子元素传递

1 个答案: