JSFiddle - React, Tailwind, and code Playground
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!!');
}
}
});