vue.js 2일(같은 레벨 간의 통신, router)

같은 레벨 간의 통신

  <div id="app">
    <app-header v-bind:propsdata="num"></app-header>
    <app-content v-on:pass="deliverNum"></app-content>
  </div>

v-on:pass="deliverNum" / v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"

- root로 데이터 10을 보냄

 

v-bind:propsdata="num" / v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"

- app-content -> root를 통해 데이터 10을 받음 

 

*root를 통해 데이터 전달받기

    var appHeader = {
      template: '<div>header</div>',
      props: ['propsdata']
    }
    var appContent = {
      template: '<div>content<button v-on:click="passNum">pass</button></div>',
      methods: {
        passNum: function() {
          this.$emit('pass', 10);
        }
      }
    }

    new Vue({
      el: '#app',
      components: {
        'app-header': appHeader,
        'app-content': appContent
      },
      data: {
        num: 0
      },
      methods: {
        deliverNum: function(value) {
          this.num = value;
        }
      }
    })

router

    <div id="app">
        <div>
            <router-link to="/login">Login</router-link>
            <router-link to="/main">Main</router-link>
        </div>
        <router-view></router-view>
    </div>

router-link는 a태그로 변환됨

* to="/페이지 이름" 넣어줘야함

var LoginComponent = {
            template: '<div>login</div>'
        }
        var MainComponent = {
            template: '<h1>main</h1>'
        }
        var router = new VueRouter({
            // 페이지의 라우팅 정보
            routes: [
                //로그인 페이지 정보
                {
                    // 페이지의 url
                    path: '/login',
                    // 해당 url에서 표시될 컴포넌트
                    component: LoginComponent
                },
                // 메인 페이지 정보
                {
                    path: '/main',
                    component: MainComponent
                }
            ]
        });

        new Vue({
            el: '#app',
            router: router,
        });