Vue 一个或多个实例？

Posted 2023-02-23

【中文标题】Vue 一个或多个实例？

【英文标题】：Vue one or multiple instances?

【发布时间】：2017-11-13 07:31:48

【问题描述】：

我对 Vue（结合 Laravel）很陌生。我不确定什么是最好的 vue（文件）结构。

例如：我有一个 vue 聊天应用程序和一个滑出的侧边栏。此时我已经创建了一个 vue 实例（在#app 元素处）。现在所有代码都在这个 vue 实例中。我应该如何为我的聊天应用和侧边栏分离实例中的数据和代码？

 Vue.component('chat-message', require('./components/ChatMessage.vue'));
 Vue.component('chat-log', require('./components/ChatLog.vue'));
 Vue.component('chat-composer', require('./components/ChatComposer.vue'));

    new Vue(
        el: "#app",
        data: 


**//Data for the chatapp**

            messages : [],

**//Data for the sidebar**

            showSidebar: false
        ,

**//Code for the chatapp**

        methods:
            addMessage(message) 
                this.messages.push(message);
                axios.post('messages', message)
            
        ,
        created() 
            axios.get('messages').then(response => 
                this.messages = response.data;
        );

            Echo.join('chatroom')
                .listen('MessagePosted', (e) =>
                this.messages.push(
                message: e.message.message,
                user: e.user,
            )
        );
        
    );

我更喜欢将此代码分成两个单独的文件（尤其是聊天应用程序的方法和其他代码，例如 chatroom.vue 和 sidebar.vue），并且只加载一个干净的 vue 实例，例如：

//Import components...
...
...
    new Vue(
        el: "#app"
    );

。我可以将此代码放入组件中吗？这会是什么样子？

谢谢。

【参考方案1】：

你是对的，你可以而且应该把它分成两个不同的部分。

聊天室.vue

import ChatMessage from './components/ChatMessage.vue';
import ChatLog from './components/ChatLog.vue';
import ChatComposer from './components/ChatComposer.vue';

export default 
    components: 
        ChatMessage,
        ChatLog,
        ChatComposer,
    ,
    data: 
        // Data for the chatapp
        messages : [],
    ,
    // Code for the chatapp
    methods:
        addMessage(message) 
    ,
    created() 

sidebar.vue

export default 
    data: 
        // Data for the sidebar
        showSidebar: false,
    ,
    // Code for the sidebar

app.js

import ChatRoom from './chatroom.vue';
import SideBar from './sidebar.vue';

new Vue(
    el: "#app",
    components: 
        ChatRoom,
        SideBar,
    ,
);