vue.js 1일(component, props, event)

v-bind

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

v-bind는 html의 속성인 id, class, style 등에 대해 model의 데이터를 연결할 때 사용된다. v-bind는 전달인자로 연결하려는 속성을 지정해주면 되고 편의상 v-bind는 생략하고 사용하기도 한다.

 

-> root에 있는 데이터가 app-header와 app-content에 들어가게 함

<div id="app">     <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->     <app-header v-bind:propsdata="message"></app-header>     <app-content v-bind:propsdata="num"></app-content>   </div>

  <script>
    var appHeader = {
      template: '<h1>{{ propsdata }}</h1>',
      props: ['propsdata']
    }
    var appContent = {
      template: '<h1>{{ propsdata }}</h1>',
      props: ['propsdata']
    }

    new Vue({
      el: '#app',
      components: {
        'app-header': appHeader,
        'app-content': appContent
      },
      data: {
        message: 'hi',
        num: 10
      }
    });
  </script>

v-on

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

-> vue 이벤트 창에서 확인 가능

-> add 버튼을 누르면 data의 num이 1씩 증가

  <div id="app">
    <p>{{ num }}</p>
    <!-- <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> -->
    <app-header v-on:pass="logText"></app-header>
    <app-content v-on:hell="hellNum"></app-content>
  </div>

 var appHeader = {
      template: '<button v-on:click="passEvent">Click me</button>',
      methods: {
        passEvent: function() {
          this.$emit('pass');
        }
      }
    }
    var appContent = {
      template: '<button v-on:click="addNumber">add</button>',
      methods: {
        addNumber: function() {
          this.$emit('hell');
        }
      }
    }

    new Vue ({
      el: '#app',
      components: {
        'app-header': appHeader,
        'app-content': appContent
      },
      methods: {
        logText: function() {
          console.log('hiiiiiiii');
        },
        hellNum: function() {
          this.num = this.num + 1;
        }
      },
      data: {
        num: 10
      }
    });