Portfolio


<template>
  <h1 ref="hi">
    hi
  </h1>
</template>

<script>
    export default {
        mounted() {
            console.log(this.$refs.hi)
        },
    }
</script>


//App.vue
<template>
  <Hello ref="hello" />
</template>

<script>
    import Hello from '~/Hello/Hello'

    export default {
        components: {
            Hello
        },
        mounted() {
            console.log(this.$refs.hello.$el)
        }
    }
</script>

Hello.vue의 셀렉터가 한개일 때


//App.vue
<template>
  <Hello ref="hello" />
</template>

<script>
        mounted() {
            console.log(this.$refs.hello.$refs.hi)
						console.log(this.$refs.hello.$refs.hehe)
        }
    }
</script>


//Hello.vue
<template>
  <h1 ref="hi">hi</h1>
  <h2 ref="hehe">hehe</h2>
</template>

Hello.vue의 셀렉터가 두개 이상 일 때


<template>
  <button
    v-if="!isEdit"
    @click="onEdit"
  >
    editmode
  </button>
  <input
    v-else
    ref="editor"
    @keyup.enter="isEdit = false"
  >
</template>

<script>
    export default {
        methods: {
            onEdit() {
                this.isEdit = true
                this.$nextTick(()=> {
                    this.$refs.editor.focus()
									// isEdit가 true가 되고 input이 나타나면 실행
                })
            }
        }
    }
</script>