vue는 부모 자식에 양방향 통신이 가능하다.

props 으로 상속받고 emit 으로 부모에게 보내드린다.

1. v-bind:, v-on:

단축구문을 사용하자.

• v-bind:msg="parentMsg" ⇒ :msg="parentMsg"
• v-on:input="func" ⇒ @input="fuc"

<template>
	<h1>{{text}}</h1>
	<edit-card :text="text" @editText="editText"></edit-card>
</template>

<script>
import EditCard from './EditCard.vue';
export default {
  components: { EditCard },
  data: () => ({
		text: ""
  }),
  methods: {
    editText(text) {
			this.text = text;
    }
  }
};
</script>

• : 사용하면 이후에 변수(JavaScript 표현식)를 사용하겠다는 의미이다.
  • text="text" 하면 그대로 "text"스트링을 넘겨준다.
  • :넘겨줄 변수 이름="실제 데이터"
• @ 는 emit 이벤트를 받는다.
  • 자식에게서 editText 이벤트를 받으면 editText 함수를 실행한다.
  • 파라미터는 emit 하는 파라미터이다. (아래를 참고하자)

<template>
	<v-card>
		<v-list-item three-line>
			<v-text-field v-model="text"/>
			<v-btn @click="onClick"> 부모에게 전송 </v-btn>
		</v-list-item>
	</v-card>
</template>

<script>
	props: ["text"],
	method: {
		onClick() {
			this.$emit("editText", text);
		}
	}
</script>

• this.$emit 으로 부모에게 이벤트를 보낸다.
• this.$emit("이벤트 명", 파라미터들...)

2. v-model

<template>
	<h1>{{text}}</h1>
	<edit-card v-model="text"></edit-card>
</template>

<script>
import EditCard from './EditCard.vue';
export default {
  components: { EditCard },
  data: () => ({
		text: ""
  })
};
</script>

<template>
	<v-card>
		<v-list-item three-line>
			<v-text-field v-model="text"/>
			<v-btn @click="onClick"> 부모에게 전송 </v-btn>
		</v-list-item>
	</v-card>
</template>

<script>
	props: ["text"],
	method: {
		onClick() {
			this.$emit("input", text);
		}
	}
</script>

• v-model은 "input" 이벤트를 디폴트로 받는다.
• 별도의 이벤트명을 하려면 아래와 같이 설정!

model: {
    prop: 'text',
    event: 'editText'
},

• 이렇게 보면 vutify 에서 v-text-field에 v-model를 쓰는 맥락과 같다. 놀라워!!