Vue 기초 익히기 여러개의 Vue 인스턴스 사용하기

이 게시글은 '코지코더' vue 기초 익히기를 듣고 공부한 내용 정리한 게시글 입니다.

1. Vue 인스턴스를 사용하기

<div id="app">
      <div>{{name}}</div>
    </div>

// Vue 인스턴스
 new Vue({
        el: '#app',
        data: {
          name: 'jaewoo',
        },

        methods: {},
      });

Vue 인스턴스를 사용하기 위해서는 div에 id값 안에서만 사용할 수 있다.
app element 밖에서 사용하게 된다면 어떤 결과가 나올까 ?!

결과는 인스턴스 내에 있는 data를 읽어오지 못해서 이렇게 브라우저에 표시된다. 그렇다면 여러개의 인스턴스를 사용하고 싶다면 어떻게 해야할까?
-> 새로운 인스턴스를 만들면 된다. vue는 여러개의 인스턴스 사용이 가능하다고 한다.

 <div id="app">
      <div>{{name}}</div>
    </div>
    <div id="app-1">{{name}}</div>
// 인스턴스
  new Vue({
        el: '#app',
        data: {
          name: 'jaewoo',
        },

        methods: {},
      });
      new Vue({
        el: '#app-1',
        data: {
          name: 'jaewoo',
        },

        methods: {},
      });

2. 다른 인스턴스의 data를 바꾸고 싶을때

 <div id="app">
      <div>{{name}}</div>
      <button @click="changeUpdate">Updated</button>
    </div>
    <div id="app-1">
      {{name}}

      <button @click="changeUpdate">Clcik</button>
    </div>
// 인스턴스
 const app = new Vue({
        el: '#app',
        data: {
          name: 'jaewoo',
        },

        methods: {
          changeUpdate() {
            app1.name = 'jaewoo updated';
          },
        },
      });
      const app1 = new Vue({
        el: '#app-1',
        data: {
          name: 'jaewoo',
        },

        methods: {
          changeUpdate() {
            app.name = 'jaewoo updated';
          },
        },
      });

다른 인스턴스의 data를 변경 시키기 위해서는 어떻게 해야할까?
정답은 vue 인스턴스를 변수에 선언하여 만들면 된다. 표현식 함수로 만들게 되면 vue인스턴스에 접근이 가능하다.