서론
반응형 데이터인 watch, watchEffect를 많이 사용하는지 모르겠지만 익숙해져야겠다에요
본론
Component
상속
상속하는 법은 기존의 react와 똑같습니다. script setup에서 import만 하면 됩니다
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
</script>
<template>
<HelloWorld />
</template>
props
props는 기존의 react와 똑같습니다. 부모 컴포넌트가 하위 컴포넌트에게 커스텀 속성을 보낼때 사용합니다.
<script>
import HelloWorld from "./components/HelloWorld.vue";
let StringData = "안녕하세요";
let NumberData = 123;
let ArrayData = ["A", "B", "C"];
let BooleanData = true;
let ObjData = {
foo: "panda",
bar: "coding",
};
</script>
<template>
<HelloWorld :propsData="StringData" />
<HelloWorld :propsData="NumberData" />
<HelloWorld :propsData="ArrayData" />
<HelloWorld :propsData="BooleanData" />
<HelloWorld :propsData="ObjData" />
</template>
/* HelloWorld.vue */
<script setup>
import { defineProps } from "vue";
const props = defineProps(["propsData"]);
</script>
<template>
<p>{{ props.propsData }}</p>
<hr />
</template>
여러개의 props를 보낼 때,
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
let StringData = "안녕하세요";
let NumberData = 123;
let ArrayData = ["A", "B", "C"];
let BooleanData = true;
let ObjData = {
foo: "panda",
bar: "coding",
};
</script>
<template>
<HelloWorld
:propsString="StringData"
:propsNumber="NumberData"
:propsArray="ArrayData"
:propsBoolean="BooleanData"
:propsObj="ObjData"
/>
</template>
/* HelloWorld.vue */
<script setup>
import { defineProps } from "vue";
const props = defineProps({
propsString: String,
propsNumber: Number,
propsArray: Array,
propsBoolean: Boolean,
propsObj: Object,
});
</script>
<template>
<p>{{ props.propsString }}</p>
<p>{{ props.propsNumber }}</p>
<p>{{ props.propsArray }}</p>
<p>{{ props.propsBoolean }}</p>
<p>{{ props.propsObj }}</p>
</template>String, Number, Array, Boolean, Object를 기본으로 보낼 수 있고 개인적으로 아래 방법으로 보내는게 react typescript같아서 오히려 편한 것 같습니다.
아래는 vue에서 권장하는 props 스타일입니다.
<script setup>
import { defineProps } from "vue";
const props = defineProps({
PropsData: {
type: Number,
required: true,
default: "아무런 boolean값이 없습니다.",
validator(props) {
return props > 10
},
},
PlusOne: Function
});
</script>
<template>
<p>{{ props.propsData }}</p>
</template>
/*
props가 없을 경우 default값이 출력이 됩니다. 콘솔창에 props가 없다고 경고를 해줍니다.
props가 false면 해당 props가 안나오고 false가 나옵니다.
props가 true면 비로소 해당 String data가 출력이 됩니다.
validator는 검사기입니다. 해당 숫자가 10초과인 값을 검사합니다.
10이하인 값도 출력이 되지만, 콘솔창에서 검사에 통과 못했다고 알려줍니다.
props는 읽기전용(readOnly)이라서 props자체로 수정이 불가능하지만,
부모컴포넌트에서 해당 값을 수정하는 함수를 가져오면 수정이 가능합니다.
*/
정리
props를 기존 react, typescript와 같이 보내면 안됩니다.
정해진 스타일 가이드가 존재하며, 해당 Data에는 type, required, default, validator(prop)가 필요합니다.
Function을 가져올수는 있는데 아직 개발자들 사이에서도 이야기가 나오는 부분이고 emit을 통해서 한번에 해결가능하다고 합니다.
