Vue 3 如何通过多个组件传递槽
P粉216203545
P粉216203545 2023-08-27 00:15:30
[Vue.js讨论组]
<p>我正在尝试使用指定的单元格创建一个可在整个项目中重复使用的巨大表格。</p><p> 我想将不同的单元格组件传递到我的表格组件中。</p><p> 但我不知道如何<strong>通过多个子节点</strong>传递一个命名槽。</p><p> 我正在使用 <strong>Vue v3.2.45</strong></p> <p>我希望能够在 App.vue 中使用我的命名槽 <code>cell</code> 的 slotProps</p><p> 就像我对 <code>id</code> 和命名槽 <code>test</code></p> 所做的那样 <p>我在这里创建了一个游乐场来让自己清楚</p> <pre class="brush:js;toolbar:false;">// App.vue &lt;script setup lang=&quot;ts&quot;&gt; import { ref } from 'vue' import { ITable } from './types.ts' import Table from './Table.vue' const table = ref&lt;ITable&gt;({ tree: [ { data: [{ value: '0' }, { value: '1' }, { value: '2' }, { value: '3' }] }, { data: [{ value: '0' }, { value: '1' }, { value: '2' }, { value: '3' }] }, ], }) &lt;/script&gt; &lt;template&gt; &lt;Table :table=&quot;table&quot;&gt; &lt;template #cell=&quot;{ cell }&quot;&gt; Hello {{ cell.value }} &lt;/template&gt; &lt;template #test=&quot;{ id }&quot;&gt; &lt;div class=&quot;row&quot;&gt;Row above is {{ id }}&lt;/div&gt; &lt;/template&gt; &lt;/Table&gt; &lt;/template&gt; </pre> <pre class="brush:js;toolbar:false;">// Table.vue &lt;template&gt; &lt;div class=&quot;table&quot;&gt; &lt;template v-for=&quot;(row, rowI) in table.tree&quot; :key=&quot;rowI&quot;&gt; &lt;Row :row=&quot;row&quot; /&gt; &lt;slot name=&quot;test&quot; :id=&quot;rowI&quot; /&gt; &lt;/template&gt; &lt;/div&gt; &lt;/template&gt; </pre> <pre class="brush:js;toolbar:false;">// Row.vue &lt;template&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;cell&quot; v-for=&quot;(cell, cellI) in row.data&quot; :key=&quot;cellI&quot;&gt; &lt;slot name=&quot;cell&quot; :cell=&quot;cell&quot; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; </pre></p>
P粉216203545
P粉216203545

全部回复(1)
P粉644981029

您可以在 Table 组件中公开 cell 插槽,并在 App.vue 中使用它

<!-- Table.vue -->
<template>
  <div class="table">
    <template v-for="(row, rowI) in table.tree" :key="rowI">
      <Row :row="row">
        <template #cell="{ cell }">
          <slot name="cell" :cell="cell"></slot>
        </template>
      </Row>
      <slot name="test" :id="rowI" />
    </template>
  </div>
</template>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号