11. 기타기능

by donggyu04

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="app">
  <anchored-heading :level="1">Hello world 1</anchored-heading>
  <anchored-heading2 :level="1">Hello world 2</anchored-heading2>
</div>

<template id="anchored-heading">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</template>

Vue

Vue.component('anchored-heading', {
	template: '#anchored-heading',
  props: {
  	level: {
    	type: Number,
      required: true,
    },
  },
});

Vue.component('anchored-heading2', {
	render: function(createElement) {
  	return createElement('h' + this.level, this.$slots.default)
  },
  props: {
  	level: {
    	type: Number,
      required: true,
    },
  },
});

new Vue({

}).$mount('#app');