vue 插槽理解

vue 插槽理解

1. 插槽使用

插槽中可以设置任意内容，观察下面的代码：
声明一个child-component组件，并在

内放置内容，结果怎样？

你好

输出内容还是在组件中的内容，在 内写的内容没起作用。

我们现在给组件增加一个插槽：

Vue.component('child-component',{
        template:`
            

            Hello,World!
            
            
        `
    })

此时，在组件你好中写的“你好”起了作用

总结：没有插槽的情况下在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容 就会跑到它这里了！

2. 默认插槽

具名插槽，就是给这个插槽起个名字

在组件中，我给插槽起个名字，一个名字叫"girl"，一个名字叫"boy"，还有一个不起名字。

然后在内，slot属性对应的内容都会和组件中name一一对应。

而没有名字的，就是默认插槽。

    
        
        
        

            我是一类人，
            我是默认的插槽
        
    

3. 具名插槽

为标签添加slot属性并设置属性值的插槽即为具名插槽。

4. 作用域插槽

说明：组件上的属性可以在组件元素内使用。

在元素上定义一个属性say，接下来在使用组件child，然后在template元素上添加属性slot-scope。

打印结果后发现是{“say”： “你好”}，也就是slot上面的属性和值组成的键值对，这就是作用域插槽。

能够把组件上的属性/值，在组件元素上使用！

再看下面的例子：

输出结果为：
{ “bbbbb”: { “id”: 1, “name”: “孙悟空” } }
{ “bbbbb”: { “id”: 2, “name”: “猪八戒” } }
{ “bbbbb”: { “id”: 3, “name”: “沙和尚” } }
{ “bbbbb”: { “id”: 4, “name”: “唐僧” } }
{ “bbbbb”: { “id”: 5, “name”: “小白龙” } }