vue插槽详解

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

前端一枚

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

阅读量914

点赞数 2

分类专栏： vue 文章标签： vue slot

本文链接：https://blog.csdn.net/u011200562/article/details/105340050

版权

本文详细介绍了Vue中的三种插槽类型：默认插槽、具名插槽和作用域插槽。具名插槽通过在父组件设置slot属性，并在子组件中指定name属性实现。作用域插槽允许父组件访问子组件的数据，通过slot-scope和子组件的data传递实现。

摘要由CSDN通过智能技术生成

插槽分为以下三种

1、默认插槽
2、具名插槽
3、作用域插槽

一默认插槽

<div id="app">
    <child-component>你好</child-component>
</div>
<script>
   Vue.component('child-component',{
   
        template:`
            <div>
            Hello,World!
            <slot></slot>
            </div>
        `
    })
    let vm = new Vue({
   
        el:'#app',
        data:{
   
        }
    })
</script>