【父向子传参二】Vue-cli脚手架创建项目之父组件向子组件传递参数之slot属性+slot标签插槽方法

Parent.vue文件（父组件）

<template>
    <div class="parent">
        <p><span>这里是父组件的地盘！！！</span></p>
        注意：父组件传参核心位置：（把slot属性名的标签插入Child组件对应的slot-name标签中）
        <Child>
            <h1>parent默认的slot</h1>
            <h1 slot="parent001">parent第一个slot</h1>
            <h1 slot="parent002">parent第二个slot</h1>
            <h1 slot="parent003">parent第三个slot</h1>
            <template slot="parent_template">
                <h1>template包裹多个内容</h1>
                <p><span>template001</span></p>
                <p><span>template002</span></p>
                <p><span>template003</span></p>
                <p><span>template004</span></p>
            </template>
        </Child>
    </div>
</template>

<script>
    import Child from '@/components/test/Child';

    export default {
        name: 'parent',
        components: {
            Child
        }
    };
</script>

<style lang="scss">

</style>

Child.vue文件（子组件）


<template>
    <div class="child">
        <p><span>这里是子组件的地盘！！！{{ parent_value }}</span></p>
        注意：子组件接收参数的核心位置：（把父组件slot属性名对应的内容插入slot-name标签对应的位置）
        <slot></slot>
        <slot name="parent001"></slot>
        <slot name="parent002"></slot>
        <slot name="parent003"></slot>
        -------这里开始是插入整个templated的内容-----
        <slot name="parent_template"></slot>
    </div>
</template>

<script>
    export default {
        name: 'child'
    };
</script>

<style lang="scss">

</style>

输出结果为：