JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

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

<div id="app">
    <!-- 페이지 안에 있다고 가정 -->  
    <form-helper 
      title="사용자 정보 수정"
      button-name="수정"
      v-on:submit="updateUser"
    > 
      <label for="name">이름
        <input type="text" id="name">        
      </label>
      <label for="email">이메일
        <input type="text" id="email">        
      </label>
    </form-helper>
    
    <form-helper 
      title="사용자 정보 등록"
      button-name="등록"
      v-on:submit="createUser"
    > 
      <label for="name">이름
        <input type="text" id="name">        
      </label>
      <label for="email">이메일
        <input type="text" id="email">        
      </label>
    </form-helper>

</div>

<template id="form-helper">
  <form v-on:submit.prevent="$emit('submit')">
    <h3>{{title}}</h3>
    <slot></slot>
    <button>{{buttonName}}</button>
  </form>
</template>

JavaScript

Vue.component('form-helper', {
	template: '#form-helper',
	props: ['title', 'button-name']
});

// 페이지 컴포넌트라고 가정
new Vue({
	el: '#app',
  methods: {
  	updateUser: function () {
    	window.alert('Update User!!');
    },
  	createUser: function () {
    	window.alert('Create User!!');
    }
  }
});