Non Prop

props 또는 event 에 명시적으로 선언되지 않은 속성, 이벤트

class, style, id 와 같은 것들

<LabelInputVue
	v-model="username"
	label="이름"
	class="nonclass"
	style="color: red"
	id="id"
	data-id="data"
></LabelInputVue>

위의 v-model, label 은 props로 정의된 속성임

그러나 나머지 class, style, id, data-id 등등은 아님

저렇게 하면 해당 컴포넌트의 root 노드에 상속이 되는 것을 확인할 수 있다.

class style 속성은

기존에 class style이 있다면 병합이 된다.

그러나 id 속성은 부모의 id를 가져온다. 덮어쓰기.

이벤트 리스너도 상속이 된다.

<template>
	<div>
		<main>
			<div class="container py-4">
				<MyButton @click="sayHello"></MyButton>
			</div>
		</main>
	</div>
</template>

<script>
	import { reactive, ref } from 'vue';
	import MyButton from './MyButton.vue';

	export default {
		components: {
			MyButton,
		},
		setup() {
			const sayHello = () => {
				alert('안녕하세요');
			};
			return { sayHello };
		},
	};
</script>

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

위와 같이 사용하면 button 에 click 이벤트가 들어가는 것이다.

non prop 속성은 root 엘리먼트에 들어가게 됨을 확인할 수 있다.

button 이 root 엘리먼트 이므로 거기에 상속이 되는 것이다.

속성 상속 비활성화

inheritAttrs: false 이렇게 해주면 됨.

상속받을 컴포넌트에 export default{} 안에 넣어주면 됨.

근데 그러면 그 컴포넌트의 특정 노드에 넣고 싶다면

context.attrs 로 접근할 수 있다.

vue3 에서는 다중 루트 노드를 가질 수 있다.

<template>
	<label class="form-label">{{ label }} </label>
	<input v-model="value" type="text" class="form-control" />
</template>

위와 같이 사용할 수 있는 것이다

물론 eslint에 걸린다고는 하는데, 무시해도 된다.

non prop 속성은?

root element에 상속하는데

어디에 상속될 것인가?

그래서 다중 루트 엘리먼트인 경우

v-bind로 상속될 곳을 정해줘야한다.

지난시간 event 에 대하여

emit에 명시하는 것이 좋다고 하였는데

1. 가독성
2. fallthroung 속성 non-prop 속성

자자 무슨 뜻이냐면

자식 컴포넌트의 button 에 이벤트 걸어서 emit 시켜서 부모로 보냄

그러면 부모 컴포넌트안에 해당 컴포넌트에서 emit 시킨 애로 받을 텐데

이렇게 걸어버리면 돌고 돌아 자식 컴포넌트의 root 엘리먼트에 이벤트가 걸림

꼬이게 되는 것임

보통은 이벤트 명을 커스텀 메서드 명으로 하니까 상관 없는데 만약에 html에 정해진 이벤트면 꼬이게 될 것임.

그러나 emits[] 안에 넣어주면 non prop 속성에서 제외가 됨. 명시적으로 넣어준 것이기 때문에 해당하는 이벤트는 root element에 상속되지 않는다.