啊啊啊啊啊威

vue插槽入门

本文简单介绍一下vue中的插槽相关的知识点，包括插槽的概念，类型，和具体使用。内容比较简单，适合入门。

插槽的类型

默认插槽的使用

默认插槽的使用案例

具名插槽的使用

具名插槽使用-其一

具名插槽使用-其二

作用域插槽的使用

默认插槽中使用作用域插槽

具名插槽中使用作用域插槽

插槽的类型

- 默认插槽 --- default

- 具名插槽 -- name

- 作用域插槽 -- v-slot

我们将根据这三种类型，进行讲解。

默认插槽的使用

在自定义组件中使用标签进行占位，当我们使用这个组件的时候，在组件标签内写入需要展示的具体内容

使用组件的时候，这个组件内的插槽就会为内容先占个位置，相当于一个占位符。

如

{
    components: {
        'MyComponent': {
            template: `    `
        }
    }
}
// 使用组件
这个位置就是需要显示的数据

默认插槽的使用案例

先上代码

在dom结构中，我们直接去使用组件，这样组件内的插槽也就会被使用。插槽为组件的内容占了个位置。

如果在使用组件时候在双标签内写入了内容，就显示写入的内容，否则显示插槽内写入的默认的内容。

默认插槽其实就是在组件注册的时候，在template里面写入了一个,标签内写入了一个默认的内容。

 Vue.component('alert-box', {//注册这个组件
            //在template里面写入插槽,并且写入默认内容，来为内容占位置
            template: `
             
            ERROR:    
            默认内容
            
            `
        })
        let vm = new Vue({
            el: "#app",
            data: {

            }
        })

结果：

具名插槽的使用

具名插槽就是给标签加上 name属性

如

{
    components: {
        'MyComponent': {
            template: `    `
        }
    }
}
// 使用组件

具名插槽使用-其一

先上代码

如后h5代码所示，我们设置了头部，底部和主体内容。为了就是使用具体插槽去渲染不同的dom节点。

// 声明组件
        Vue.component('base-layout', {
            //template中，我们分别给插槽取名header和footer
            // 在main中的是没有名字的默认插槽
            //在使用这个组件渲染页面dom结构，页面的内容会根据插槽的名字来具体渲染结构
            template: `
             
                
                    
                
                
                        
                
                
                        
                
            
            `
        })
        let vm = new Vue({
            el: "#app",
            data: {

            }
        })

结果