标签: vuejs-slots

目前，我有一个父组件，它渲染一个子组件，并将一个组件（模态组件，称为 Modal.vue）作为插槽传递到子组件中。

家长.vue

<ChildComponent :id='1>
 <modal slot="modal" :postTitle="'test'" />
</ChildComponent>

儿童.vue

export default {
props : ['id'],
data(){
return {
 modalHeading : "Heading"
}
}
<template>
<slot name="modal"></slot>
</template>

Modal.vue

<script>
export default {
  name: "model",
  props: ["postTitle"],
  data() {
    return {
      heading: "test"
    };
  },
  mounted() {
    console.log("mounted modal slot");
    console.log(this.postTitle);
    console.log(this.modalHeading);
};
</script>

<template>
  <div>
    <h2>{{ modalHeading }}</h2>
    <h3>This will be the modal slot</h3>
    <p>{{ postTitle }}</p>
  </div>
</template>

我的问题是，如何访问插槽组件中子级的数据（和函数）？

我一直在尝试让它与作用域插槽一起使用，但似乎无法破解语法。

我想使用 vue 创建一个组件，该组件具有使用vuejs slot api 的Card标题和内容部分。

我无法理解如何在 Card 组件中创建结构。该卡应包含所有线框样式（填充和边距），但可以从使用该组件的子模板中进行扩展。

我想知道是否有任何标准方法可以对子组件中带有插槽的包装元素进行样式化。

基本Card元素有 2 个插槽，其中包含结构元素，我希望子模板可以在必要时进行修改。

<div class="Card">
  <header class="CardHeader">
    <slot name="header"></slot>
  </header>
  <div class="CardContent">
    <slot></slot>
  </div>
</div>

理想情况下，我想向元素添加一个:class属性#slot，并在插槽中的元素上使用该属性，但是，似乎旧语法在最新版本的框架中已被弃用，例如。

<Card>
  <template #header class="extendHeader">
    stuff
  </template>
</Card>

我可以想到 3 种行之有效的方法，每种方法都有其缺点。

1. 使用 props 通过根元素添加类
2. 在根元素上使用类并在组件元素上使用样式挂钩
3. 将插槽内容包装在另一个元素中

我的项目必须使用 css-modules 来尽可能减少全局 css，因为它在过去给我带来了很多悲伤。

1.使用props通过根元素添加类

此方法允许我使用 css-modules 并使Card元素开放以供扩展

组件模板需要从子模板中组合额外的样式

<header :class="$style.Header, ...headerClasses]">
  <slot name="header"></slot>
</header>

然后，子模板可以用来:header-classes扩展基本 Card 类，或覆盖不需要的样式。

<Card :header-classes="[$style.header]">
  <template #header>
    stuff
  </template> …

我有一个组件 ( prism-editor)，它只从 中获取代码v-model="code"。这意味着，代码必须通过以下方式发送到组件code：

代码.vue

<template>\n  <prism-editor class="my-editor" v-model="code" \n    :highlight="highlighter" :line-numbers="numbers"/>\n</template>\n\n<script>  \n  import { PrismEditor } from 'vue-prism-editor';\n\n  export default {\n    components: {\n      PrismEditor,\n    },\n    data: () => ({\n        code: this.$slots,\n        numbers: true\n    }),\n  }\n</script>\n

我想从一个Code由插槽命名的父组件绑定它：

页面.vue

<template>\n    <code language="c">\n        int main() {\n            printf('Hello World!');\n        }\n    </code>\n<template>\n\n<script>\n  import Code from 'code.vue'\n  export default {\n    components: {\n      'code': Code\n    }\n  }\n</script>\n

在我的Code组件中，我必须找到一种方法来获取槽数据并将其直接传递到code要发送到v-model='code' …

我有一个 Vue 3 应用程序和一个 StencilJS 组件库。我的 Stencil 组件之一之前使用了默认插槽，并且它与 Vue 配合得很好。现在，我在 Stencil 组件中引入了命名插槽，但命名插槽不再在 Vue 中工作。我知道 slot 属性已被弃用，所以我尝试了以下方法：

<template v-slot:body>
    //content to go inside Stencil component body slot
</template>

但是，它是空白的，因为没有呈现任何内容。现在我使用旧方法通过添加 Eslint 禁用来添加插槽，如下所示：

<!-- eslint-disable-next-line  vue/no-deprecated-slot-attribute -->
<div slot="body">
    //content to go inside Stencil component body slot
</div>

这是可行的，但我必须在各处添加禁用功能。我想以正确的方式去做。有人可以告诉我该怎么做吗？

我无法循环遍历 Vue 3 中的 $slots 对象以将所有插槽从父组件传递到子组件，$slots 对象在子组件中似乎为空。

如何循环遍历 $slots 对象以将所有父插槽传递给子组件？

运行代码时出现此错误： TypeError: Cannot read properties of null (reading 'key')

这是关于我的问题的沙箱，您可以取消注释第 5 行以查看完整结果： https://codesandbox.io/s/blazing-bush-g7c9h ?file=/src/pages/Index.vue

GitHub 示例： https: //github.com/firibz/vue3slots

家长：

<system-input filled v-model="text" label="input">
  <template v-slot:before>
    <q-icon name="mail" />
  </template>
</system-input>

孩子：

  <div class="row justify-center">
    <q-input v-model="componentValue" v-bind="$attrs" style="width: 250px">
      <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
        <slot :name="slot" v-bind="scope"/>
      </template>
    </q-input>
    <q-separator class="full-width" color="secondary" />
    <div class="bg-negative full-width q-pa-lg">slots: {{ $slots }}</div>
    <div class="bg-warning full-width q-pa-lg">slots: {{ $slots.before }}</div>
  </div>

我试图通过插槽传递信息，但不断收到错误，

“命名槽必须在自定义元素上使用 ''。”

请参阅下面的我的代码。

    <template>
        <div>
            <h3>Home</h3>
            <User v-slot:user="{ user }">
                <template>
                <div v-if="user">
                    <p>Logged-in as {{user.uid}} </p>
    
                    <!-- PASS USER STATE AS PROP -->
                    <UserProfile :user="user"/> 
                    <ChatList :uid="user.uid"/>
                </div>
                <Login v-else/>
                </template>
            </User>
        </div>
    </template>

我在以下行中收到错误。

    <User v-slot:user="{ user }">

我创建了一个显示各个页面的表格数据的组件。该组件内部使用b-table。现在，对于几个页面，我想自定义某些列的呈现，Bootstrap Tables 允许使用具有特殊语法的作用域字段槽：

    <template #cell(field)="data">
            {{ data.item.value }}
    </template>

其中 field - 列名称，来自我的包含列的数组，以及 data.item - 要呈现的单元格项目。

问题是我对不同的页面有不同的字段，因此这种自定义应该来自父组件，并且这些模板应该动态创建。

这是我尝试解决它的方法：

通过属性将具有可自定义字段和唯一插槽名称的数组传递给 MyTableComponent 在 MyTableComponent 中动态创建用于自定义的模板，并在内部动态创建命名插槽

从父传递槽数据到命名槽

我的表组件：

    <b-table>
        <template v-for="slot in myslots" v-bind="cellAttributes(slot)">
            <slot :name="slot.name"></slot>
        </template>
    </b-table>

    <script>
        ...
        computed: {
            cellAttributes(slot) {
                return ['#cell(' + slot.field + ')="data"'];
            }
        }
        ...
    </script>

家长：

    <MyTableComponent :myslots="myslots" :items="items" :fields="fields">
        <template slot="customSlot1">
                Hello1
        </template>
        <template slot="customSlot1">
                Hello2
        </template>
    </MyTableComponent>

<script>
    ...
    items: [...my items...],
    fields: [...my columns...],
    myslots: [
        { field: "field1", …