vue 插槽的使用

今天学习到插槽，觉得是个很好的东西，赶紧记录下。

1，基本使用，以下摘自官网https://vuejs.bootcss.com/guide/components.html#%E9%80%9A%E8%BF%87%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9

以下为深入理解

2，插槽内容，插槽内容可以是字符串，可以是HTML，也可以是组件。

3，作用域

4，后备内容，当父组件没有提供任何插槽内容时，可显示默认内容。

5，具名插槽

当我们需要在一个组件中显示多个插槽的时候，我们需要给插槽命名。

v-slot 也是有缩写的，缩写符号为#，之后的例子会用缩写。

6，作用域插槽

有时我们需要让插槽内容能够访问子组件中才有的数据，但是由于作用域的关系，父组件不能直接访问到子组件的数据，那么怎么办呢，请看下面的例子

父组件使用

    
    

    

    
A paragraph for the main content.
    
And another one.

    

页面显示如下

注意v-slot只能用在template模板上。当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上。

7，插槽的使用例子

 

页面显如下

更详细的内容参见官网哦~

https://vuejs.bootcss.com/guide/components-slots.html