Question

我对Vue很新（与Laravel结合使用）。我不确定什么是最好的vue（文件）结构。

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

 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,
            })
        });
        }
    });

我更喜欢将这个代码分成两个单独的文件（特别是chatapp的方法和其他代码，例如chatroom.vue和sidebar.vue），并且只加载一个干净的vue实例，例如：

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

。我可以将此代码放入组件中吗？这看起来怎么样？

感谢。

Answer 1

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

chatroom.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,
    },
});

Vue一个或多个实例？

1 个答案: