vue插槽之$slots、$scopedSlots

2020-06-06  本文已影响0人  梦行乌托邦

在学习vue插槽的时候,将匿名插槽,具名插槽,作用域插槽都实践了一遍,但是却碰到一些问题,请看代码
子组件:

<template>
    <div class="zs">
        我是HelloWorld2的孩子,这是祖先给我的{{toZS}}
        <br>
        <slot></slot>
        <slot name="slot1"></slot>
        <slot name="slot2"></slot>
        <slot  :hw2c="hw2c" :hw2cO="hw2cO"></slot>
    </div>
</template>

<script>
    export default {
        inject: ['toZS'],
        data() {
            return {
                hw2c: 'hw2c',
                hw2cO: {
                    a: 'I am a',
                    b: 'I am b'
                }
            };
        },
        mounted() {
            console.log('||----mounted----||');
            console.log(this.$slots);
            console.log(this.$scopedSlots);
        }
    };
</script>

<style>
    .zs{
        background-color: aqua;
    }
</style>

父组件:

<template>
    <div>
        <p class="hw2-p" @click="$parent.$emit('foo', hw2)">我是HelloWorld2</p>
        <p class="hw2-p" @click="$bus.$emit('sjzx', 1122)">我是HelloWorld2...</p>
        <HelloWorld2C>
            <p>我是匿名插槽!!!!!!!!!!!!!</p>
            <template name="slot1">
                <p>我是具名插槽1</p>
            </template>
            <template name="slot2">
                <p>我是具名插槽2</p>
            </template>
            <template v-slot:default="{hw2c, hw2cO}">
                <p>
                    作用域插槽: 
                    {{hw2c}} 
                    {{hw2cO && hw2cO.a}}
                </p>
            </template>
        </HelloWorld2C>
    </div>
</template>

问题一:匿名插槽区域显示的内容变成了作用域插槽的内容?
这个问题有在网上搜到,https://www.cnblogs.com/xianshenglu/p/8479915.html
这里说了匿名作用域插槽会覆盖匿名插槽,最好使用具名插槽。于是修改代码:
子组件:

<slot name="slot3" :hw2c="hw2c" :hw2cO="hw2cO"></slot>

父组件:

<template v-slot:slot3="{hw2c, hw2cO}">
    <p>
        作用域插槽: 
        {{hw2c}} 
        {{hw2cO && hw2cO.a}}
    </p>
</template>

以上将匿名作用域插槽加上name,问题一得到解决。
问题二:$slots、$scopedSlots获取到的内容都比实际要少?
最终改写了父组件前3个插槽的写法,问题得到解决

<template v-slot:default>
        <p>我是匿名插槽!!!!!!!!!!!!!</p>
</template>
<template v-slot:slot1>
    <p>我是具名插槽1</p>
</template>
<template v-slot:slot2>
    <p>我是具名插槽2</p>
</template>

不过不太清楚为什么?可能是vue的升级规定了写法。希望明了的同学不吝赐教~

上一篇 下一篇

猜你喜欢

热点阅读