Vue.js - Youtube API를 이용해 props와 emit 활용하기

❕결과

- input태그에 원하는 검색어를 입력하고 엔터를 누르면 Video List아래에 유튜브 video 영상 목록이 뜬다!

- Video List를 클릭 시 해당 비디오가 Video Detail에 나온다!

 

❕우리가 구현해야할 Props와 Emit 관계도

App.vue -- Youtube API를 통해 요청과 응답 주고받음, 그 외 다른 vue들과 emit & props

<template>
  <div id="app">
    <h1>App.vue</h1>
    <TheSearchBar @input-change="onInputKeyword"/>
    <br/>
    <VideoDetail :video="selectedVideo"/>
    <VideoList :videos="videos" @select-video="SelectVideo"/>
  </div>
</template>

<script>
import axios from 'axios'
import TheSearchBar from '@/components/TheSearchBar'
import VideoList from '@/components/VideoList'
import VideoDetail from '@/components/VideoDetail'
const API_URL = 'https://www.googleapis.com/youtube/v3/search'
const API_KEY = 'Youtube에서 받아온 API KEY'

export default {
  name: 'App',
  components:{
    TheSearchBar,
    VideoList,
    VideoDetail,
  },
  data(){
    return{
      inputValue : null,
      videos : [],
      selectedVideo: null,
    }
  },
  methods:{
    SelectVideo(video){
      this.selectedVideo = video

    },
    onInputKeyword(inputText){
      this.inputValue=inputText
      const params = {
        key : API_KEY,
        part: 'snippet',
        type: 'video',
        q : this.inputValue,
      }
      axios({
        method: 'get',
        url:API_URL,
        params
      })
      .then(result => {
        // console.log(result.data.items)
        this.videos = result.data.items
      })
      .catch(err => {
        console.log(err)
      })
    
    }
  }

}
</script>

 

TheSearchBar.vue -- App.vue에 emit

<template>
  <div id="app">
    <h2>검색</h2>
    <input type="text" @keyup.enter="onInputKeyword">

  </div>
</template>

<script>

export default {
  name: 'SearchBar',
  methods:{
    onInputKeyword(event){
      this.$emit('input-change',event.target.value)
    }
  }
}
</script>

 

VideoList.vue -- App.vue와 porps & emit, VideoListItem.vue와 props & emit

<template>
  <div >
    <h2>Video List</h2>
    <ul>
      <VideoListItem v-for="video in videos" :key="video.id.viedoId" :video="video" @select-video="SelectVideo"/>
    </ul>
  </div>
</template>

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

export default {
  name: 'VideoList',
  components:{
    VideoListItem
  },
  props:{
    videos:{
      type:Array,
      required: true,
    }
  },
  methods:{
    SelectVideo(video){
      this.$emit('select-video',video)
    }
  }

}
</script>

 

VideoListItem.vue -- VideoList.vue와 emit & props

<template>
  <li @click="selectVideo">
    <img :src="video.snippet.thumbnails.default.url" alt="유튜브 이미지">
    {{video.snippet.title}}

  </li>
  
</template>

<script>
export default {
  props:{
    video:{
      type:Object,
      required:true,
    }
  },
  methods:{
    selectVideo(){
      this.$emit('select-video',this.video)
    }
  }

}
</script>

<style>

</style>

 

VideoDetail.vue -- App.vue로부터 props

<template>
  <div v-if="video">
    <h2>Video Detail</h2>
    <iframe :src="videoURI" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  props:{
    video:{
      type:Object,
    },
  },
  computed:{
    videoURI(){
      const videoId = this.video.id.videoId
      return `https://www.youtube.com/embed/${videoId}`
    },
  },

}
</script>

<style>

</style>