vue插槽(slot)的使用

最新推荐文章于 2024-07-26 13:02:41 发布

叮当猫咪呀

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量1.2w

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/fggfgf/article/details/124865239

版权

vue的slot分为三种：:匿名插槽，具名插槽，作用域插槽

作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于父组件=>子组件

一.匿名插槽

1)带有插槽的组件 TipsText.vue（子组件）

<slot> 作为我们想要插入内容的占位符——就这么简单！

<template>
    <div>
      <div>hello world</div>
      <slot></slot>
    </div>
</template>

2）父组件 Test.vue 引入 TipsText.vue

<template>
    <div>
        <tips-text>
            <template v-slot>
                <div>我是匿名插槽</div>
            </template>
        </tips-text>
    </div>
</template>
<script>
import TipsText from './TipsText.vue'
export default {
    components:{ TipsText }
}
</script>

二.具名插槽 (给插槽加入name属性就是具名插槽)

1)带有插槽的组件 TipsText.vue（子组件）

<template>
    <div>
      <div>hello world</div>
      <slot name="one"></slot>
      <slot name="two"></slot>
    </div>
</template>

2）父组件 Test.vue 引入 TipsText.vue

<template>
    <div>
        <tips-text>
            <template v-slot:one>
                <div>我是具名插槽one</div>
            </template>
            <template v-slot:two>
                <div>我是具名插槽two</div>
            </template>
        </tips-text>
    </div>
</template>
<script>
import TipsText from './TipsText.vue'
export default {
    components:{ TipsText }
}
</script>

三.作用域插槽

与前两者的不同 slot自定义:name="值" 子组件可向父组件传递信息

1)带有插槽的组件 TipsText.vue（子组件）

<template>
    <div>
      <div>hello world</div>
      <!-- ⼦组件中告诉⽗组件，要实现obj⾥的信息 -->
        <slot :info="info.title"></slot>
        <slot :info="info.msg"></slot>
        <slot :info="info.text"></slot>
    </div>
</template>
<script>
import { reactive } from "vue";
export default {
    setup() {
        const info = reactive({ 
            title:'作用域插槽',
            msg:'lalalalalala',
            text:'how are you'
        })
       
        return {
            info
        }
    }
}
</script>

2）父组件 Test.vue 引入 TipsText.vue

<template>
    <div>
        <tips-text>
            <template v-slot:default="slotProps" >
                <div>{{slotProps.info}}</div>
            </template>
            <template v-slot:other="slotProps" >
                <div>{{slotProps.info}}</div>
                <div>{{slotProps.text}}</div>
            </template>
            
        </tips-text>
    </div>
</template>
<script>
import TipsText from './TipsText.vue'
export default {
    components:{ TipsText }
}
</script>