Question

我熟悉ReactJS，但不熟悉VueJS。

我可以在哪里将子组件放置在父组件上。我在ReactJS中有这个示例，如何使用VueJs创建相同的示例：

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

VueJS中的{props.children}是什么？

Answer 1

Vue与React“子级”概念类似，是插槽。

https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots https://vuejs.org/v2/guide/components-slots.html

插槽可以像这样使用：

// FancyBorder.vue

<div class="FancyBorder">
    <slot/>
</div>

// App.vue

<FancyBorder>
    Contents!
</FancyBorder>

Vue插槽相对于React子代也有一个优势，因为您可以使用命名插槽来具有多个“组”元素，这可以使代码减少对“魔术”类名的依赖：

// FancyBorder.vue

<div class="FancyBorder">
    <h1 className="Dialog-title">
        <slot name="header"></slot>
    </h1>
    <slot/>
</div>

// App.vue

<FancyBorder>
    <template slot="header">
        Header
    </template>
    Contents!
</FancyBorder>

如何在父级渲染子组件

1 个答案: