KAKAO_SLOT

by duckduck0054

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>06-16</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>

<body>
<div id="app">
  <input type="text" v-model="world" placeholder="이름.." />
  <child>
    <!-- hello 슬롯에 삽입될 요소 -->
    <span slot="hello">안녕, </span>
    
    <!-- world 슬롯에 삽입될 요소 -->
    <span slot="world">{{world}}</span>
    
    <!-- 이름 없는 슬롯에 삽입될 요소 -->
    <div>
      <button @click="helloworld()">눌러보세요!</button>
    </div>
  </child>
</div>
</body>
<script type="text/javascript">
Vue.component('child', {
  template: `
  	<div>
    	<slot name="hello">Hello</slot>
      <slot name="world">여기에는 world의 내용을 넣을 예정</slot>
    	<slot>이름이 없는 슬롯</slot>
    </div>
  `
});

const app = new Vue({
  el: '#app',
  data: {
    world: ''
  },
  methods: {
  	helloworld () {
    	alert('입력한 내용은 ' + this.world);
    }
  },
});


/*
Vue 에는 슬롯이란 독특한 개념이 있다.
부모 템플릿에서 컴포넌트를 사용하면서 컴포넌트 사이에 무언가 끼워넣을 때 그것을 표시할 영역을 잡아주는 엘리먼트이다.

slot 에는 name 을 붙일 수 있는데, 컴포넌트 태그의 자식 요소에 slot="슬롯명" 과 같이 슬롯명을 지정해주면 해당 자식 요소가 컴포넌트의 슬롯 위치에 삽입되게 된다.

해당 컴포넌트 태그의 자식 요소 중 슬롯 name 이 없는 경우 컴포넌트의 이름 없는 슬롯에 해당 자식 요소가 치환되게 된다.

위의 예에서 살펴보듯이 슬롯에 삽입된 요소들의 경우, 부모 요소에서 주입한 것이므로 삽입된 요소들에 대한 클릭 등의 이벤트는 부모 요소가 관장하게 된다.

*/
</script>
</html>