如何将属性从父模板传递到Vue.js中的广告位

Question

我有一个组件A，它使用插槽将组件B包裹起来

组件A声明

<component-A>
     <slot></slot>
</component-A>

component-B用法：

   <component-A :some-prop="foo">
      <component-B></component-B>
   </component-A>

当我将此道具（someProp）传递到组件A时，有什么方法可以在组件B中访问它？

Answer 1

如果component-B需要传递一些数据，则它必须通过道具接收。

您要的是让component-B也收到foo；只需像使用component-A一样通过道具传递它，这里的位置没有什么区别。

<component-A :some-prop="foo">
  <component-B :some-prop="foo"></component-B>
</component-A>

但是我怀疑这不是您的问题；如果不是，请说明此处的广告位是如何相关的。

Answer 2

如果您想在父亲与老虎机中的任何人之间共享信息，Vue会提供老虎机道具，例如：

<slot name="icon-order" :someProp="some-prop" :someProp2="some-prop2">

一旦在组件插槽中注入了一些东西，您就可以访问该属性，例如：

<component-A :some-prop="foo">
     <component-B slot-scope="slotProps"></component-B>
</component-A>

然后，在组件B内部，您可以使用在每个组件A上设置了每个已声明属性的方式访问slotProps，只需使用：slotProps.someProp或slotProps.someProp2。

您可以更好地了解Vue文档： https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots

希望有帮助