vue.js <slot>タグで親からHTMLを受け取る

親からデータを受け取る方法として、<slot>タグがある。
親の<template>とその変数を受け取ることができる。

子コンポーネントに<slot>を配置する

<slot></slot>をテンプレート部に配置する。
これが親から受け取ったデータの受け口になる。

child.vue

<template>
<div>
    <slot></slot>
</div>
</template>

親コンポーネントで送るデータを記述する

子コンポーネントを呼び出すタグの中に送りたいHTMLを記述する。

parent.vue

<template>
<div>
    <Child>
      <!-- 子に送られる内容 -->
      <h1>text</h1>
      <h1>{{number}}</h1>
    </Child>
</div>
</template>

<script>
import Child from "./components/Child"

export default{
  data() {
    return {
      number: 10,
    };
  },
  components: {
    Child
  },
};
</script>

表示してみる。

子コンポーネントの<slot>部が親で記述した内容に置き換わり、表示される。