Vue 컴포넌트 활용방법

Global Component, Local Component 사용방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
    <global-component></global-component>
    <local-component></local-component>
</div>

<script>
    Vue.component('globalComponent', {
        template: '<div>globalComponent</div>'
    })
    
    new Vue({
        el: '#app',
        components: {
            'localComponent': {
                template: '<div>localComponent</div>'
            }
        }
    }) 
</script>

자식 컨포넌트 Input Value 변경시 부모 컨포넌트의 Data 변경하는 방법

/src/components/Main.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div>
    <Toolbar :q.sync="q"></Toolbar>
  </div>
</template>
£
<script>
import Toolbar from '@/components/Toolbar'

export default {
  components: {
    Toolbar
  },
  name: 'Main',
  data () {
    return {
      q: ''
    }
  }
}
</script>

/src/compnents/Toolbar.vue

1
2
3
4
5
6
7
<template>
  <div>
    <input type="text"
           :value="q"
           @input="$emit('update:q', $event.target.value)"/>
  </div>
</template>

자식 컴포넌트 Input 이벤트 발생 시 부모 컴포넌트 methods 실행 방법

/src/components/Main.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div>
    <Toolbar @search="search"></Toolbar>
  </div>
</template>

<script>
import Toolbar from '@/components/Toolbar'

export default {
  components: {
    Toolbar
  },
  name: 'Main',
  methods: {
    search () {
      console.log('search method')
    }
  }

/src/compnents/Toolbar.vue

1
2
3
4
5
6
<template>
  <div>
    <input type="text"
           @keyup.enter="$emit('search')"/>
  </div>
</template>

Resource