Vue 一个或多个实例？答案

【问题标题】：Vue one or multiple instances?Vue 一个或多个实例？
【发布时间】：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"
    });

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

谢谢。

【问题讨论】：

标签： laravel vuejs2 vue-component

【解决方案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,
    },
});

【讨论】：