Props and Emit
Props ๋ก ๋ฐ์ดํฐ ์ ๋ฌํ๊ธฐ
๋ชจ๋ component instance ์๋ ์์ฒด ๊ฒฉ๋ฆฌ ๋ ๋ฒ์๊ฐ ์๋ค
์ฆ, ํ์ component์ template์์ ์์ ๋ฐ์ดํฐ๋ฅผ ์ง์ ์ฐธ์กฐ ํ ์ ์์ผ๋ฉฐ, ๊ทธ๋ ๊ฒ ํด์๋ ์ ๋จ!
๋ฐ์ดํฐ๋
props
option์ ์ฌ์ฉํ์ฌ ํ์ component๋ก ์ ๋ฌ ๋ ์ ์๋ค
Prop
์์ component์ ์ ๋ณด๋ฅผ ์ ๋ฌํ๊ธฐ์ํ ์ฌ์ฉ์ ์ง์ ํน์ฑ
ํ์ component๋
props
option์ ์ฌ์ฉํ์ฌ ์์ component๋ก๋ถํฐ ๋ฐ์ ๊ฒ์ผ๋ก ๊ธฐ๋๋๋props
๋ฅผ ๋ช ์์ ์ผ๋ก ์ ์ธํด์ผ ํจ
ex)
Parent.vue - ์์ ์ปดํฌ๋ํธ
<template>
<div class="parent">
<h2>Parent Component</h2>
<!-- 1. prop ์ด๋ฆ="๋ด์ฉ" -->
<Child @hungry="onHungrySignal" :propFromParent="parentMsg" />
<!-- ์์์ด $emit ํ custom event ๊ฐ hungry์ -->
</div>
</template>
<script>
// 1. import
import Child from '../components/Child.vue'
export default {
name: 'Parent',
data(){
return {
parentMsg: 'Message from parent',
}
},
// 2. ๋ฑ๋ก
components: {
Child, // Child: Child ๋ฅผ ๊ฐ์ํ ํ ๊ฒ์!
},
methods: {
onHungrySignal(menu1, menu2){
console.log(menu1, menu2)
}
}
}
</script>
<style>
</style>
Child.vue - ํ์ ์ปดํฌ๋ํธ
<template>
<div class="child">
<h2>Child Component</h2>
<!-- 3. ์ฌ์ฉํ๋ค. -->
{{ propFromParent}}
<button @click="hungrySignal"> ๋ฐฐ๊ณ ํ์!</button>
</div>
</template>
<script>
export default {
name: 'Child',
// 2. props ๋ฑ๋ก (๋ฐ๋์ object ๋ฅผ ์จ์ผ Validation ๊ฐ๋ฅ)
props: {
propFromParent: String, //๋์ด์ค๋ data ์ validation ๊ฒ์ฌ
},
methods: {
hungrySignal () {
// 1. ๋ถ๋ชจํํ
์ด๋ฒคํธ (์๊ทธ๋) ๋ฐฉ์ถ
this.$emit('hungry', 'ํผ์ ๋จน๊ณ ์ถ๋ค', '์นํจ๋ ๋จน๊ณ ์ถ๋ค') // Custom Event('์ด๋ฒคํธ์ด๋ฆ', ...๋ฐ์ดํฐ)
}
}
}
</script>
<style>
.parent {
border: 3px solid gray;
margin: 3px;
padding: 3px;
}
.child {
border: 3px solid blue;
margin: 3px;
padding: 3px;
}
</style>
camelCase
vs kebab-case
camelCase
vs kebab-case
HTML ์์ฑ์ ๋์ ๋ฌธ์๋ฅผ ๊ตฌ๋ถํ์ง ์์ผ๋ฏ๋ก ๋ฌธ์์ด์ด ์๋ ํ ํ๋ฆฟ์ ์ฌ์ฉํ ๋
camelCased
prop ์ด๋ฆ์ ํด๋นํ๋kebab-case
๋ฅผ ์ฌ์ฉํด์ผ ํจ
๋ฆฌํฐ๋ด
vs ๋์
๋ฆฌํฐ๋ด
vs ๋์
๋ฆฌํฐ๋ด prop์ ์ซ์๊ฐ ์๋ ๋ฌธ์์ด๋ก ์ ๋ฌ๋จ
<comp some-prop="1"></comp>
JavaScript ์ซ์๋ฅผ ์ ๋ฌํ๋ ค๋ฉด ๊ฐ์ด JavaScript ํํ์์ผ๋ก ํ๊ฐ๋๋๋ก
v-bind
or:
๋ฅผ ์ฌ์ฉํด์ผ ํจ!<comp v-bind:some-prop="1"></comp>
๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ
๋ชจ๋ props๋ ํ์ ์์ฑ๊ณผ ์์ ์์ฑ ์ฌ์ด์ ๋จ๋ฐฉํฅ ๋ฐ์ธ๋ฉ์ ํ์ฑํจ
์์ ์์ฑ์ด ์ ๋ฐ์ดํธ ๋๋ฉด ํ์๋ก ํ๋ฅด๊ฒ ๋์ง๋ง, ๊ทธ ๋ฐ๋๋ ์ ๋จ!
์ด๋ ๊ฒ ํ๋ฉด ํ์ ์ปดํฌ๋ํธ๊ฐ ์ค์๋ก ๋ถ๋ชจ์ ์ํ๋ฅผ ๋ณ๊ฒฝํ์ฌ ์ฑ์ ๋ฐ์ดํฐ ํ๋ฆ์ ์ถ๋ก ํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์
vue.js ๋ ์๋ฐฉํฅ ๊ฐ๋ฅ
v-model ์ ์๋ฐฉํฅ
emit ํ์ง ์์๋ ๊ฐ๋ฅ
but, vue๋ ์ปดํฌ๋ํธ ๊ฐ ์๋ฐฉํฅ ๊ฐ๋ฅํ์ง๋ง ๋จ๋ฐฉํฅ์ ์ฐ๋๊ฒ์ ๊ถ์ฅ!
๋จ๋ฐฉํฅ flow ๋ฅผ ๋ง๋ค์ด์ผ ํ๋ค!
Event Emit
์ปดํฌ๋ํธ์ ํต์ ๋ฐฉ๋ฒ ์ค ํ์ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ๋ก ํต์ ํ๋ ๋ฐฉ์
์ด๋ฒคํธ ๋ฐ์ ์ฝ๋ ํ์
ํ์ ์ปดํฌ๋ํธ์
method
๋life-cycle hook
๊ณผ ๊ฐ์ ๊ณณ์ ์๋์ ๊ฐ์ ์ฝ๋๋ฅผ ์ถ๊ฐํ๋คthis.$emit('EVENT_NAME');
ํด๋น ์ด๋ฒคํธ๋ฅผ ์์ ํ๊ธฐ ์ํด ์์ component์ ํ ํ๋ฆฟ์ ์๋์ ๊ฐ์ด ๊ตฌํ
<div id="app"> <child-component v-on:์ด๋ฒคํธ ๋ช ="์์ ์ปดํฌ๋ํธ์ ์คํํ ๋ฉ์๋ ๋ช ๋๋ ์ฐ์ฐ"></child-component> </div>
+
Youtube-browser ๋ง๋ค๊ธฐ
1. Google Developer Console์์ Youtube API key ๋ฐ๊ธฐ
2. axios
์ค์น
axios
์ค์นnpm i axios
3. ๊ณต์ ๋ฌธ์๋ก ์ฌ์ฉ๋ฒ ํ์
ํ๊ธฐ
+
vue-filter
install
npm install @vuejs-community/vue-filter-date-parse
register
import Vue from 'vue';
import VueFilterDateParse from '@vuejs-community/vue-filter-date-parse';
Vue.use(VueFilterDateParse);
Last updated
Was this helpful?