props

컴포넌트를 하나 가지고 여러가지의 원하는 데이터를 보여주고 싶을 때 사용하는 것이 props

외부에서 전달받을 수 있다.

부모컴포넌트에서 데이터를 전달 받을 수 있음

props 선언

props 속성으로 선언한다

<template>
	<div>
		<main>
			<div class="container py-4">
				<div class="row g-3">
					<div v-for="post in posts" :key="post.id" class="col col-4">
						<AppCard
							:title="post.title"
							:contents="post.contents"
						></AppCard>
					</div>
				</div>
			</div>
		</main>
	</div>
</template>

<script>
	import { reactive } from 'vue';
	import AppCard from '../components/AppCard.vue';

	export default {
		components: {
			AppCard,
		},
		setup() {
			const post = reactive({
				title: '제목2',
				contents: '내용2',
			});

			const posts = reactive([
				{ id: 1, title: '제목1', contents: '내용1' },
				{ id: 2, title: '제목2', contents: '내용2' },
				{ id: 3, title: '제목3', contents: '내용3' },
				{ id: 4, title: '제목4', contents: '내용4' },
				{ id: 5, title: '제목5', contents: '내용5' },
			]);
			return { post, posts };
		},
	};
</script>

<style lang="scss" scoped></style>

넘겨줄 때는 위의 코드와 같이 :title, :content에 바인딩하여 넘겨준다.

<template>
	<div>
		<div class="card">
			<div class="card-body">
				<h5 class="card-title">{{ title }}</h5>
				<p class="card-text"> {{ contents }} </p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['title', 'contents'],
		setup() {
			return {};
		},
	};
</script>

<style lang="scss" scoped></style>

받을 때는 위와 같이 props 안에 해당 데이텅이름을 가져온뒤 template에서 사용하면 끝

props는 객체로도 선언할 수 있고

몇개의 옵션을 적용해서 디테일하게 적용할 수 있음

그냥 문자열로 간단히 선언하는 것보다

객체타입으로 디테일하게 선언하는 것을 권장한다.

props: {
		type: {
			type: String,
			default: 'news',
		},
		title: {
			type: String,
			required: true,
		},
		contents: {
			type: String,
			required: true,
		},
		isLike: {
			type: Boolean,
			default: false,
		},
},

위와 같이 사용할 수 있다.

type: 데이터 형식 default : 초기값 required : 필수 조건 validator : 유효성 검사가 필요한 경우

type: {
			type: String,
			default: 'news',
			validator: value => {
				return ['news', 'notice'].includes(value);
			},
},

validator 위와 같이 사용할 수 있다.

obj를 반환하는 경우에는 default로 그 해당 초기값을 생성자로 가지는 함수를 반환해줘야한다.

setup 함수에서 사용하고 싶다면 setup(props) 이렇게 받을 수 있다

props.title 이렇게 사용할 수 있고

setup(props) {
		const isLikeClass = computed(() =>
			props.isLike ? 'btn btn-danger' : 'btn btn-outline-danger',
		);
		return { isLikeClass };
},

위와같이 사용하여 class를 변경해주는 걸 사용할 수 있다.

template 에서도 $props 로 접근도 가능하다. props 의 경우에는 kebab 케이스로 사용한다.

단방향 데이터 흐름

모든 props 는 상위 속성고 ㅏ하위속성간에 단방향 바인딩으로 형성됨

상위 속성이 업데이트 되면 하위속성도 업데이트 되지만

하위 속성의 변경이 상위속성으로 전달되지는 않는다.

앱의 데이터 흐름 변경의 혼동을 막음.

자식에서 부모로 이벤트 올리는 방법

emit이라는 애를 통해 전달한다.

자식에서 부모컴포넌트로 전달할 때 막하면 안된다 혼동이 될 수 있음

boolean cast

boolean 타입 disabled 같은애들

disabled : Boolean 이라고 사용하면 됨.