JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <h2>부모</h2>
  {{message}}
  <child-component
    v-on:update-parent-message="updateMessage"
  ></child-component>
</div>

<template id="child-component">
  <div>
    <h2>자식</h2>
    <input type="text" v-model="newMessage" placeholder="부모에 전달할 메시지를 입력하세요.">
    <button v-on:click="updateParentMessage">변경</button>
  </div>
</template>

JavaScript

Vue.component('child-component', {
	template: '#child-component',
  data: function () {
  	return {
    	newMessage: ''
		}
	},
  methods: {
  	updateParentMessage: function () {
    	this.$emit('update-parent-message', this.newMessage);
		}
  }
});


new Vue({
	el: '#app',
  data: function () {
  	return {
    	message: '자식 컴포넌트의 input에 메시지를 입력하고 변경 버튼을 눌러주세요'
    }
  },
  methods: {
  	updateMessage: function (newMessage) {
    	this.message = newMessage;
		}
	}
})