javascript - 在 Vue.js 中将组件属性传递给组件的惯用方法是什么？

Question

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

例如:

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 组件，它是否采用组件的路径，它是否采用组件，它是否根据传递的 Prop 评估它的 child ，它是否有插槽，混合？

我的猜测是:

*.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

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

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

Dynamic & Async Components