如何封装/包装VueJS组件？(How to encapsulate / wrap a VueJS component?)

 大家好，请原谅我的英语:-) 
 
 我有一个可以带动态插槽的Vue组件（插槽的名称将取决于道具）。 
 
 我在几个地方使用它，并且一些插槽总是存在。 
 
 为了避免冗余，我正在寻找一种方法来创建一个“包装”最终组件的组件，以允许我只定义添加插槽。 
 
 如果有一种“明显”的方式来实现它，我可能会错过它:-) 
 
 代码示例 
 
 没有“包装组件” 
 
<b-table
  show-empty
  small
  hover

  [...some others and always present props...]

  :items="aDataVarThatWillChangeBasedOnTheContext"

  [...some others and uniq props...]
>
  <template slot="same-1">
   A slot that will always be present with the same content (for example, a checkbox in the first column)
  </template>

  <template slot="same-2">
   A slot that will always be present with the same content (for example, some action buttons in the last column)
  </template>

  [...some others and always present slots...]

  <template slot="not-the-same">
   A slot that is only used in this context (for example, a duration based on a row timestamp and a timestamp picked by the user)
  </template>

  [...some others and uniq slots...]
</b-table>
 
 使用“换行组件” 
 
<my-b-table
  :items="aDataVarThatWillChangeBasedOnTheContext"
>
  <template slot="not-the-same">
   A slot that is only used in this context (for example, a duration based on a row timestamp and a timestamp picked by the user)
  </template>
</my-b-table>
 
 注意：动态插槽名称不可预测。 如果我突然需要一个“foo”列，我应该能够通过一个“foo”插槽（和一个“HEAD_foo”插槽，就我而言） 
 
 一些研究 
 
 我在这里读到： 
 
 
 
 它们（功能组件）作为包装组件也非常有用。 例如，当你需要： 
 
 
 
  
 以编程方式选择要委派的其他组件之一 
 
  
 在将它们传递给儿童组件之前，操作儿童，道具或数据 
 
 
 
 
 而且“在将孩子，道具或数据传递给儿童组件之前操作儿童，道具或数据”似乎正是我所需要的。 
 
 我着眼于渲染功能，但很多东西似乎没有实现，比如v模型，我很难弄清楚如何通过动态插槽。 
 
 预先感谢您的回答（s）！ 
 
 up：在07.03.2018我还没有任何关于如何解决这个案件的想法 

Hi everybody, please pardon my english :-)
 
I have a Vue component that can take dynamic slots (the names of the slots will depend on a props).
 
I use it on several places and some of the slots are always present.
 
To avoid redundancy, I'm looking for a way to create a component that "wrap" the final component to allow me to define only the additionals slots.
 
If there is an "obvious" way to achieve it, I may have missed it :-)
 
Code example
 
Without a "wrap component"
 
<b-table
  show-empty
  small
  hover

  [...some others and always present props...]

  :items="aDataVarThatWillChangeBasedOnTheContext"

  [...some others and uniq props...]
>
  <template slot="same-1">
   A slot that will always be present with the same content (for example, a checkbox in the first column)
  </template>

  <template slot="same-2">
   A slot that will always be present with the same content (for example, some action buttons in the last column)
  </template>

  [...some others and always present slots...]

  <template slot="not-the-same">
   A slot that is only used in this context (for example, a duration based on a row timestamp and a timestamp picked by the user)
  </template>

  [...some others and uniq slots...]
</b-table>
 
With a "wrap component"
 
<my-b-table
  :items="aDataVarThatWillChangeBasedOnTheContext"
>
  <template slot="not-the-same">
   A slot that is only used in this context (for example, a duration based on a row timestamp and a timestamp picked by the user)
  </template>
</my-b-table>
 
Note: The dynamic slot name is not predictible. If I suddenly need a "foo" column, I should be able to pass a "foo" slot (and a "HEAD_foo" slot, in my case)
 
Some researches
 
I read here that:
 
 
 
They’re (the functionnal components) also very useful as wrapper components. For example, when you need to:
 
 
 
  
Programmatically choose one of several other components to delegate to
 
  
Manipulate children, props, or data before passing them on to a child component
 
 
 
 
And "Manipulate children, props, or data before passing them on to a child component" seems to be exactly what I need.
 
I looked on render function but a lot of things seems to be not implemented, like the v-model, and I have difficulties to figure out how to pass dynamic slots...
 
Thank you in advance for your(s) answer(s) !
 
up: At the 07.03.2018 I still dont have any idea about how to solve this case

原文：https://stackoverflow.com/questions/48807290