html5 slot,Vue的组件中对于slot的使用

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

slot使用方法一

Document

Vue.component('my-slot',{

template:

`

这里是头部

这里是中间

这里是尾部

`,

})

new Vue({

el:"#app",

data:{

}

})

结果为

这里是头部

这里是中间

这里是尾部

注意：

1、组件使用过程中，组面最外面必须有包裹，否者会只显示第一个区域

2、slot中的数据表示的就是默认值，只有在dom中进行引用，浏览器中显示的才是引用的值

slot使用方法二(比较常用)

Document

这里不是默认的头部

这里不是默认的中间

这里不是默认的尾部

Vue.component('my-slot',{

template:

`

这里是头部

这里是中间

这里是尾部

`,

})

new Vue({

el:"#app",

data:{

}

})

结果为：

这里不是默认的头部

这里不是默认的中间

这里不是默认的尾部

注意：

1、

和 是一一对应的关系 div负责的是dom中，slot负责的则是组件中

2、通常情况下，使用template对数据进行包裹

内容

使用slot分发内容

使用一种方式混合父组件的内容与子组件自己的模板，这个过程称之为“内容分发”。在子组件中使用特殊元素作为内容的插槽，这样会使组件的可拓展性更强。

单个slot

在子组件模板中有slot标签，被视为备用内容，在父组件不提供内容的情况下使用，如果父组件提供内容，则把整个内容片断插入到slot所在的DOM位置，并替换掉slot镖标签本身。

子组件模板中没有slot标签，父组件提供的内容会被抛弃。

具名slot

元素可以用一个特殊的属性name来配置如何分发内容，可以使用匿名的slot.处理name没有对应slot的内容

编译的作用域

父组件模板的内容在父组件作用域内编译。

子组件模板的内容在子组件作用域内编译。