美文网首页
vue插槽之$slots、$scopedSlots

vue插槽之$slots、$scopedSlots

作者: 梦行乌托邦 | 来源:发表于2020-06-06 13:56 被阅读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的升级规定了写法。希望明了的同学不吝赐教~

相关文章

  • vue插槽之$slots、$scopedSlots

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

  • Part 7: 测试Vue.js中的Slots插槽

    Test Vue.js Slots in Jest 测试Vue.js中的Slots插槽 Learn how to ...

  • vue $slots, $scopedSlots ,如何在r

    $scopedSlots 传参 注意:从 2.6.0 开始,这个 property 有两个变化: 作用域插槽函数现...

  • 10个vue技巧

    slots 新语法向 3.0 看齐 ❝使用带有“#”的新命名插槽缩写语法,在Vue 2.6.0+中可用?❞ [图片...

  • jsx中插槽的写法

    作用域插槽 scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。...

  • 3、vux-XHeader

    props 属性 slots 插槽 events 事件 methods 方法 1、import {XHeader}...

  • 七、插槽 Slots

    插槽内容可以是任意合法的模板内容,不局限于文本。例如我们可以传入多个元素,甚至是组件:示例:

  • Vue之深入理解插槽—slot, slot-scope, v-s

    Vue 2.6.0 以前Vue 2.6.0 以后具名插槽 slot具名插槽 v-slot作用域插槽 slot-sc...

  • vue jsx使用插槽

    默认插槽:jsx: 具名插槽: App.vue

  • vue插槽

    vue插槽slot的理解与使用 vue slot插槽的使用介绍及总结

网友评论

      本文标题:vue插槽之$slots、$scopedSlots

      本文链接:https://www.haomeiwen.com/subject/rcextktx.html