vue2中插槽(slot)的基本使用規範

<!--子元件-->

<template>
    <span>
        我是基礎slot子元件, 父元件傳過來的值:
        <span style="color: red"><slot></slot></span>
    </span>
</template>

<!--父元件-->

<li>
    基礎slot元件(匿名插槽)：<Base>這是一段父元件傳過來的文字</Base>
</li>

import Base from "./Base.vue";

<!--子元件-->

<template>
    <span>
        <span style="color: red">
            <slot name="name1"></slot>
            <slot name="name2"></slot>
        </span>
    </span>
</template>

<!--父元件-->

<li>
    <p>具名插槽：</p>
    <Specific>
        <template v-slot:name1>
            <p>name1傳過來的內容</p>
        </template>
        <template v-slot:name2>
            <p>name2傳過來的內容</p>
        </template>
    </Specific>
</li>

import Specific from "./Specific.vue";

<!--子元件-->

<template>
    <span>
        <span>
            <slot name="scopeName" v-bind:scopeData="age"></slot>
        </span>
    </span>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class Scope extends Vue {
    private age: Number = 23;
}
</script>

<!--父元件-->

<li>
    <p>作用域插槽</p>
    <Scope>
        <template v-slot:scopeName="childData">
            作用域子元件slot返回的資料：
            <span style="color: red">
                {{ childData.scopeData }}
            </span>
        </template>
    </Scope>
</li>

import Specific from "./Specific.vue";

{ data:{ username:1 } }

<!--子元件-->

<template>
    <span>
        <p>
            <slot v-bind:user="user"></slot>
        </p>
    </span>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class Deconstru extends Vue {
    private user: Object = {
        name: "zhangsan",
        age: 23,
    };
}
</script>

<!--父元件-->

<li>
    <p>解構插槽</p>
    <Deconstru>
        <template v-slot="{ user: person }">
            父元件模板：{{ person.name }},{{ person.age }}
        </template>
    </Deconstru>
</li>

import Specific from "./Deconstru.vue";