今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做了一个项目,然后通过项目中的一些案例进行总结。
今天我们来说说 Vue 中的内容分发 ,首先 Vue 实现了一套内容分发的 API,这套 API 是基于当前的 Web Components 规范草案,将 元素作为承载内分发内容的出口,内容分发是 Vue 中一个非常重要的功能,很多第三方的框架库都使用到了 功能,所以掌握这个技能是非常重要的。
它可以让我们更加优雅的使用组件。
我对 的理解有三点或者说优势,当然,这个只是我个人的理解,如果你有不同理解的地方,欢迎交流讨论,这样才能碰出不一样的花火。
回到主题,我对内容分发的三点理解:
- 可以优雅的包装原生的 HTML 标签
- 组件标签可以嵌套,就像使用原生 HTML 标签一样
- 让组件更加的通用和可复用
如果没有 元素,当我们在组件的标签中使用组件标签或者组件标签中使用 HTML 原生标签,都是没有任何作用的,这个和我们以往使用和认识的 HTML 是相违背的。
下面我们就对这三点去做一个详细的阐述,先从一个张图开始。
这个大家都见过,一个标准的 dialog 对话框,项目中也经常使用到,我们把它抽出来做成一个组件如下:
标题
x
这是一个标准的 dialog 对话框
首先这个组件不够灵活,内容基本上是写死的,就拿标题来说,我们希望标题是可以变化的,让使用者可以传递标题进来,那么我们该如何去设计我们的这个组件呢?这就是我们今天要说的内容分发 了,我们小小的修改下我们的例子。
在父组件中使用它
传递进来的标题
x
你会发现组件渲染之后, 元素会被替换成组件中包裹的元素,标题的内容完全由外部传递进来。
上面我们只是嵌套了一个简单的 div 标签元素,插槽可以传入任何的元素,不管是HTML,还是组件元素。
插槽的默认内容
不仅如此,插槽还支持默认内容,当我们在外部没有传递给插槽内容时,我们可以给插槽一个默认的显示内容,如果外部有内容,默认的内容将会被外部的内容替换掉。
这是默认标题
x
这是一个标准的 dialog 对话框
在父组件中使用它,不嵌套任何的内容时,我们的组件就会有个默认的渲染标题。
//无内容
如果我们在父组件中提供了内容,默认的内容就会被替换。
我是新传递的标题
x
具名插槽
有些时候,我们除了标题有这么高的自由度之外,我们也想其它的内容也有这样的灵活性,让使用者也能通过父组件传递进来,Vue 中给我们提供了方法,我们一次可以使用很多插槽,然后给每一个插槽起个名字,也就是给我们的 添加一个 name 属性。
于是我们就开始修改我们的对话框
我们在外部使用时,只需要提供相应名称,我们就可以渲染出我们需要的
带名字的插槽
x
这是一个标准的 dialog 对话框
可以看到,我们在外部可以控制组件的全部内容只要我们需要,这给我们的组件带来了很高的灵活性。除了灵活性,Vue 中还给我提供了一种叫 作用域插槽的用法,它让我们的组件更加的复用性。
具名插槽不仅仅只能用在 元素上,它也可以直接用在一个普通的元素上
带名字的插槽
x
作用域插槽
作用域插槽在 Vue 中是一个非常重要的一个功能,它让组件更加的可复用性,但是官方文档上对作用域插槽的解释很令人蛋疼,反正我是看了几遍不是太理解,最后通过自己写了几个案例才明白原来可以这么厉害,如果你也和我一样一开始不太理解,不妨跟着我看看下面的案例或许对你的帮助很大。
首先我们实现一个星级评价组件