是否可以將v-forprops傳遞給嵌入在html中的組件？插槽道具不起作用

我想將 v-for 回圈的“實體”屬性傳遞給插槽，并在添加到 html 中該插槽的組件中使用它。

串列組件

<template>
  <two-col-row-display
    :field="field"
    :fieldcss="fieldcss"
    :valuecss="valuecss"
  >
    <component
      :is="listType"
    >
      <li v-for="instance, i in map_instances(instances)" :key="map_id(instance)">
          <slot name="default" :instance="instance">{{ map_display(instance) }}</slot>
      </li>
    </component>
  </two-col-row-display>
</template>

開槽組件

<template v-slot:default="liProps">
  <div class="vue_wrap">
    {{ liProps.instance.description }}
  </div>
</template>

HTML

<display-list
    field="Display Ingredient"
    :map_id="instance => instance.ingredient_id"
    :map_instances="instances => {{ $recipe->ingredients }}"
>
    <display-ingredient></display-ingredient>
</display-list>

“實體”屬性不會通過“liProps”傳遞給組件。無論我是否將其宣告為道具，我都會收到“道具未定義”錯誤。如果創建一個新組件并同時傳入顯示串列和開槽組件，則可以實作預期的結果，但這不太靈活。我更愿意找到一種方法來訪問插入到 html 中的組件中的 v-for 回圈資料。

有效，但不利于可重用性

<template>
  <display-list
    :field="field"
    :fieldcss="fieldcss"
    :list-type="listType"
    :map_id="map_id"
    :map_instances="map_instances"
    :valuecss="valuecss"
  >
    <template v-slot:default="liProps">
      {{liProps.instance.description}}
    </template>
  </display-list>
</template>

uj5u.com熱心網友回復：

<display-list>
    <display-ingredient></display-ingredient>
</display-list>

在上面（簡化的）模板中，您沒有將任何道具或插槽傳遞給<display-ingredient>; 它不會僅僅因為你將它插入到里面就神奇地接收到這些資料<display-list>。

你應該<display-ingredient>接收一個instance道具。它不需要插槽，因為它只需要渲染instance：

<template>
  <div class="vue_wrap">
    {{ instance.description }}
  </div>
</template>

現在您必須將組件連接在一起：傳遞instance到<display-ingredient>. instance傳遞給 的默認插槽<display-list>，因此當組件只有一個插槽時，您可以使用v-slot 速記語法來處理特殊情況，即default：

<display-list v-slot="{ instance }">
    <display-ingredient :instance="instance"></display-ingredient>
</display-list>

uj5u.com熱心網友回復：

經過更多的研究和實驗，我發現用 a 代替 并使用動態組件

顯示串列動態

<template>
  <two-col-row-display
    :field="field"
    :fieldcss="fieldcss"
    :valuecss="valuecss"
  >
    <component :is="listType">
      <li v-for="instance, i in map_instances(instances)" :key="map_id(instance)">
          <component :is="display || 'div'" :instance="display ? instance : undefined" class="vue_wrap">
            {{ map_display(instance) }}
          </component>
      </li>
    </component>
  </two-col-row-display>
</template>

...

props: {
   display: { //name of the component, if provided
      type: String,
   },
   map_display: {
      type: Function,
      default: () => '-', // This keeps from an error when the slot default isn't used
   },
...

將:is="display || 'div'"組件更改為顯示中設定的 Vue 組件。如果沒有設定，渲染時就變成一個div。

所述:instance="display ? instance : undefined"套組件“實體”僅當顯示被設定的情況下支柱，否則它是未定義和在視圖中不呈現。instance=[object object]如果使用默認 div，這將防止出現在呈現的 html 中。

{{ map_display(instance) }} 如果未宣告顯示道具，則為默認值。

如果 map_display 沒有宣告，default: () => '-'prop 默認顯示一個字符

顯示成分

<template>
  <div>
    {{ instance.description }}
  </div>
</template>

...

props: {
          instance: {
            type: Object,
            required: true,
          },
        },

在可以交換的組件中宣告并需要實體道具

html

  <display-list-dynamic
    field="Ingredients Dynamic"
    :map_display="instance => instance.line"
    :map_id="instance => instance.ingredient_id"
    :map_instances="instances => {{ $recipe->ingredients }}"
  ></display-list-dynamic>
  <display-list-dynamic
    field="Ingredients Dynamic Switch"
    display="display-ingredient"
    :map_id="instance => instance.ingredient_id"
    :map_instances="instances => {{ $recipe->ingredients }}"
  ></display-list-dynamic>

在第一個示例中，未宣告 display 道具。:map_display="instance => instance.line"如果未定義 map_display 道具，則將呈現默認值。在第二個示例中，宣告了 display prop display="display-ingredient"，因此該組件成為“顯示成分”Vue 組件。

標籤：拉拉维尔 Vue.js vue 组件

上一篇：從可組合訪問主要組件的資料-VueJS3

下一篇：將資料從狀態傳遞到動作vuex