如何为带有插槽的 vuejs 配置 facebook 插件

Posted 2023-02-23

【中文标题】如何为带有插槽的 vuejs 配置 facebook 插件

【英文标题】：How can I configure facebook plugin for vuejs with slots

【发布时间】：2019-10-25 18:07:13

【问题描述】：

我需要将 facebook 插件集成到我的 vuejs 应用程序中。我想用 vue-facebook-login-component 插件，但我在某些方面感到困惑。我无法更改文本，它没有文本道具，而是有一个文本插槽。而且他们的插槽示例没有 facebook 登录所需的 api-id。

他们必须插槽示例，但我不明白如何使用它，以前从未使用过插槽。 google了一下还是不行。

当我在我的代码中使用时， slot-scope="scope" 给出了范围已定义但从未使用过的错误，所以我的第一个问题是我将如何使用它？

另一个问题是，在 slot 示例中它没有 app-id，当我使用 slot 时，我很困惑将 id 放在哪里，以及如何获取登录-注销信息。

这个可以，但我无法更改登录/注销文本。

<v-facebook-login app-id="966242223397117"></v-facebook-login>

这是插件页面上给出的带有插槽的示例

<template>
  <v-facebook-login-scope>
    <button slot-scope="scope">
      <!-- Compose html/CSS here, otherwise nothing will be rendered! -->
    </button>
  </v-facebook-login-scope>
</template>

这是我想要整合 facebook 登录的原始按钮代码。我将如何在上面的 code-with-slot 中使用他的代码？我将把 app-id 放在哪里？这是一个更详细的代码，带有来自插件的插槽，它也没有 api-id。

https://github.com/adi518/vue-facebook-login-component/blob/master/src/components/FBLogin.vue

    <v-button
      class="gray fw shadow-none login-box__submit"
      title="FACEBOOK İLE GİRİŞ YAP"
    />

所以我尝试的是直接将我的按钮放入其中（只是上课不起作用）

这为我的按钮类带来了按钮，但保持连接并且永远不会带来登录

<template>
  <v-facebook-login-scope>
    <button slot-scope="scope">
      <!-- Compose HTML/CSS here, otherwise nothing will be rendered! -->
    <v-button
      class="gray fw shadow-none login-box__submit"
      title="FACEBOOK İLE GİRİŞ YAP"
    />
    </button>
  </v-facebook-login-scope>
</template>

【参考方案1】：

试试这个

<v-facebook-login app-id="966242223397117">
<span slot="login">FACEBOOK İLE GİRİŞ YAP</span>
</v-facebook-login>