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

ゝ一纸荒年。 2021-09-18 10:50 167阅读 0赞

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>

### **输出结果为： ** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/db518c7eac224253833f6a1efd7d5494.png