Vue.js 加载和隐藏异步组件

Question

我正在 vue.js 中制作一个聊天机器人，我需要你的帮助。我创建了 2 个 Vue 组件：

• ChatLoader.vue - 渲染按钮以打开实际网络聊天窗口的第一个组件

• Webchat.vue - 仅在我
  时加载的异步组件 点击按钮打开聊天窗口。

所以我的 ChatLoader.vue 正在做的是在按钮单击时设置参数 chatInitialized = true。然后打开聊天窗口。

在我的 Webchat.vue 中，我有一个关闭按钮，单击该按钮仅通过设置 showWindow = false;

隐藏聊天窗口（未从 DOM 中删除） >

现在，当聊天窗口被隐藏时，我再次看到打开聊天的按钮（它一直在那里，只是因为被聊天窗口重叠而不可见）但是当我现在点击按钮时，我想设置 showWindow = true webchat.vue 组件代替了之前的行为，所以再次显示了 webchat 窗口。

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>) 状态 showWindow，那么您必须在子组件中创建一个可由父元素调用的方法。

首先，在您的Webchat 组件中，创建一个新方法，例如maximize，它将this.showWindow 更改为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>