한 개 또는 여러 개의 인스턴스를 지정하시겠습니까?

한 개 또는 여러 개의 인스턴스를 지정하시겠습니까?

나는 (라벨과 결합하여) Vue를 꽤 생소하다.어떤 게 제일 좋은지 모르겠어.

예를 들면 다음과 같다.나는 Vue 채팅 어플리케이션과 사이드바를 가지고 있다.이 순간 나는 (#app 요소에서) 하나의 vue 인스턴스를 만들었다.모든 코드는 이제 이 하나의 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,
            })
        });
        }
    });

나는 이 코드를 두 개의 분리된 파일(특히 챗앱의 방법 및 기타 코드(예: 채팅룸)로 분리하는 것을 선호한다.vue 및 사이드바.vue)를 선택하고 깨끗한 vue 인스턴스만 로드하십시오. 예:

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

이 코드를 컴포넌트에 넣을 수 있을까?어떻게 생겼을까?

고마워요.

네 말이 맞아, 너는 그것을 두 개의 다른 요소로 분리할 수 있고 또 분리해야 해.

채팅 룸부에를 하다

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() {}
}

사이드 바.부에를 하다

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

참조URL: https://stackoverflow.com/questions/44489000/vue-one-or-multiple-instances