Vue.js 加載和隱藏異步組件

Question

我正在 vue.js 中制作一個聊天機器人，我需要你的幫助。 我創建了 2 個 Vue 組件：

• ChatLoader.vue - 渲染按鈕以打開實際網絡聊天的第一個組件 window

• Webchat.vue - 只有當我加載的異步組件
  單擊按鈕打開聊天 window。

所以我的ChatLoader.vue正在做的是在按鈕單擊時設置參數chatInitialized = true 。 然后打開聊天 window。

在我的Webchat.vue 中，我有一個關閉按鈕，單擊該按鈕僅通過設置showWindow = false; 隱藏聊天 window（未從 DOM 中刪除）；

現在，當聊天 window 被隱藏時，我再次看到打開聊天的按鈕（它一直存在，只是因為被聊天窗口重疊而不可見）但是當我現在單擊按鈕時，我想在 Webchat.vue 中設置 showWindow = true組件而不是以前的行為，因此再次顯示網絡聊天 window。

ChatLoading.vue：

    <template>
    <div>
        <span class="open-chat" v-on:click="showChat">
            <i class="icon ficon-live-chat"></i>
            Virtual assistant
        </span>
        <Webchat v-if="chatInitialized"></Webchat>
    </div>
</template>

<script>
    import ChatLoading from "./ChatLoading.vue";

    const Webchat = () => ({
        component: import('./Webchat.vue'),
        loading: ChatLoading
    });

    export default {
        data() {
            return {
                chatInitialized: false
            }
        },
        components: {
            Webchat
        },
        methods: {
            showChat() {
                this.chatInitialized = true;
            }
        }
    }
</script>

網絡聊天.vue：

<template>
    <div class="chat-window" v-show="showWindow">
        <button type="button" class="cancel icon ficon-close" v-on:click="minimize"></button>
        <WebchatPlugin
        >
        </<WebchatPlugin>
    </div>
</template>

<script>
    import <WebchatPlugin{
        createDirectLine,
        createStore
    } from "botframework-webchat/lib/index";
    import {DirectLine} from "botframework-directlinejs";

    export default {
        data() {
            return {
                showWindow : true
            }
        },
        components: <WebchatPlugin
        methods: {
            minimize() {
                this.showWindow = false
            }
        },
</script>

我怎樣才能做到這一點？ 謝謝

Answer 1

如果您想從消費父組件切換子組件的 ( <Webchat> ) state showWindow ，那么您必須在子組件中創建一個可由父元素調用的方法。

首先，在您的Webchat組件中，創建一個新方法，比如this.showWindow maximize為true ：

methods: {
    minimize() {
        this.showWindow = false;
    },
    maximize() {
        this.showWindow = true;
    }
},

---

然后，在您的父組件中，您可以：

1. 創建對您的Webchat組件的引用
2. 使用this.$ref訪問組件及其內部方法，並調用您剛剛創建的maximize()方法：

例子：

<template>
    <div>
        <span class="open-chat" v-on:click="showChat">
            <i class="icon ficon-live-chat"></i>
            Virtual assistant
        </span>

        <!-- Use `ref` attribute to create a reference to component -->
        <Webchat ref="webchat" v-if="chatInitialized"></Webchat>
    </div>
</template>

<script>
    import ChatLoading from "./ChatLoading.vue";

    const Webchat = () => ({
        component: import('./Webchat.vue'),
        loading: ChatLoading
    });

    export default {
        data() {
            return {
                chatInitialized: false
            }
        },
        components: {
            Webchat
        },
        methods: {
            showChat() {
                this.chatInitialized = true;

                // Access Webchat component's inner method
                // Do this inside `this.$nextTick` to ensure it is accessible
                this.$nextTick(() => {
                    this.$refs.webchat.maximize();
                });
            }
        }
    }
</script>