Question

我来自ReactJS世界，它具有创建灵活组件的通用方法：将组件作为道具传递给其他组件。

例如：

import MyCard from './MyCard';
import Slider from './Slider';

const Example = ({items}) => {
  return <div classname="example"> <Slider cardComponent={MyCard} items={items}/> </div>
}

简单，优雅，聪明。

在Vue.js中实现此方法的正确且惯用的方法是什么？

我不需要创建Slider组件的答案，我想知道将MyCard组件传递给它的惯用方式是什么。

Answer 1

取决于您创建Slider组件的方式，它是否采用该组件的路径，是否采用该组件，是否根据传递的props评估其子级，是否具有插槽，mixin？

我的猜测是：

*。html

<template id="example-template">
  <div class="example">
    <slider :items="items">
      <template #cardSlot="{requiredAttr1, requiredAttr2}">
        <my-card :attr1="requiredAttr1" :attr2="requiredAttr2">
      </template>
    </slider>
  </div>
</template>

*。js

import MyCard from './MyCard';
import Slider from './Slider';
export default {
  template: '#example-template',
  name: "Example",
  props: ["items"],
  components: {
    MyCard,
    Slider
  }
}

Slots

<div class="slider"">
<slot name="slotname" :passedPropName="sliderValue"></slot></div>


<slider><template #slotname="passedPropObj"><mycomp :propName="passedPropObj.passedPropName" />

...我现在在移动设备中的即时消息将在以后修复

Dynamic & Async Components

将组件prop传递到Vue.js中的组件的惯用方式是什么？

1 个答案: