일단 컴포넌트를 만든다. 이 컴포넌트는 src > components 디렉토리에 만든다.

// src/components/PageTitle.vue

<template>
  <div class="page-title">
   {{title}}
  </div>
</template>

<script>
export default {
  **props**: {  // 이 컴포넌트가 부모 컴포넌트로부터 받은 props
    title: {
      **type**: String,  **// 다른 타입의 데이터가 들어오면 warning 띄워 줌**
      **default**: '페이지 타이틀입니다.'  **// 만약 부모 컴포넌트에서 props를 안 내려줬을 때 디폴트값**
    }
  }
}
</script>

<style scoped>
  .page-title {
    font-size: 24px;
    color: navy;
    padding-bottom: 5px;
    border-bottom: 5px solid navy;
  }
</style>

컴포넌트 안의 script > components에 컴포넌트를 등록해서 사용할 수 있다.

<template>
  <div>
    **<PageTitle title="Basic Page Title" />** <!--바인딩되지 않았으므로 정적인 데이터-->
  </div>
</template>

<script>
import **PageTitle** from '../components/PageTitle.vue'

export default {
  name: 'BasicView',
  **components: { PageTitle },**
  data() {
    return {
      sampleData: '',
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {},
}
</script>

<style scoped></style>

부모 컴포넌트 → 자식 컴포넌트

동적 props 내리기

v-bind를 사용해서 동적으로 props를 줄 수 있다.

<template>
  <div>
    <ChildComponent **:likes="likeNum"**/>  <!--동적으로 바인딩!-->
    <button **@click="likeNum++"**>like upup</button>
  </div>
</template>

<script>
import PageTitle from '../components/PageTitle.vue'
import ChildComponent from './ChildComponentView.vue'

export default {
  name: 'BasicView',
  components: { PageTitle, ChildComponent },
  data() {
    return {
      sampleData: '',
      likeNum: 0,
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {},
}
</script>

<style scoped></style>

ref : 자식 컴포넌트의 이벤트를 부모 컴포넌트에서 발생시키기

ref를 사용해서 직접 부모 컴포넌트에서 자식 컴포넌트의 이벤트를 발생시킬 수 있다.

자식 컴포넌트에서 ref로 method를 발생시킬 요소를 특정한 다음, v-on으로 해당 메서드를 바인딩한다.

// ChildComponent
<template>
  <div>
    <button type="button" **@click="childFunc"** **ref="child_btn"**>
      Child Click
    </button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  data() {
    return {}
  },
  methods: {
    childFunc() {
      alert('부모 컴포넌트가 호출한 자식 컴포넌트 메서드')
    },
  },
}
</script>

그 후 부모 컴포넌트에서 버튼을 새로 만든다. 이 버튼은 자식 컴포넌트의 메서드를 호출하기 위해, 해당 메서드와 바인딩되어 있는 자식 컴포넌트에 접근할 것이다.

이를 위해 자식 컴포넌트에도 ref를 붙인다.

<template>
  <div>
    <button type="button" @click="callChildFunc">Parent Click</button>
    <ChildComponent **ref="child_component"**/>  <!--자식 컴포넌트에도 ref를 붙인다.-->
  </div>
</template>

<script>
import ChildComponent from './ChildComponentView.vue'

export default {
  name: 'BasicView',
  components: { ChildComponent },
  data() {
    return {
    }
  },
  methods: {
    callChildFunc() {
      this.$refs.child_component.$refs.child_btn.click()
    }
  },
}
</script>

<style scoped></style>

부모 컴포넌트의 버튼을 click > 자식 컴포넌트 ref > 자식 컴포넌트 안에 메서드를 호출하는 버튼 ref > click() 이벤트 걸기