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

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

你会使用插槽来做到这一点.

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>

例子.