vue中 slot 的使用总结

vue中slot的使用总结

slot是Vue中的插槽，首先它是使用在子组件中的
Vue的slot插槽，简单理解就是，在子组件内占坑，在父组件里填坑。

slot一般都是子组件定义了主体部分，父组件引入，然后父组件根据需求不同需要向里面添加不同的内容

1 . 普通 slot 插槽

父组件
（记得将子组件引入，并且将组件在components注册后才能使用）

<template>
<!-- 父组件 --><div><slotTest></slotTest></div>
</template>
<script>
import slotTest from './slotTest'export default {data(){return{}},components:{slotTest}
}
</script>

子组件

<template>
<!-- 子组件 --><div>子组件</div>
</template>

这时，我们向<slotTest> </slotTest>无论添加什么内容，浏览器中都不会识别，比如下面这个例子

<template><div><!-- 父组件 --><slotTest>这是一段子组件没有slot插槽时定义的文字</slotTest></div>
</template>

接着我们向子组件中添加slot插槽

<template>
<!-- 子组件 --><div>子组件<slot></slot></div>
</template>

这时，之前添加在父组件里那句话就被呈现出来了

2 . 具名插槽

具名插槽的作用是，一个萝卜一个坑，可以将父组件中的内容插入指定的子组件位置中

具名插槽的使用语法
1 . 子组件定义slot时，在标签上加上name='xxx'属性
2 . 父组件将想插入的部分最外部的div上加上slot="xxx"属性

如
父组件

<template><div><!-- 父组件 --><slotTest><div slot="header">父组件传递过来的头部内容</div><div slot="body">父身体内容</div><div slot="footer">父组件传递过来的页脚内容</div></slotTest></div>
</template>

子组件

<template>
<!-- 子组件 --><div>子组件<div>----------页头-----------</div><slot name='header'></slot><div>----------页中-----------</div><slot name='body'></slot><div>----------页脚-----------</div><slot name='footer'></slot></div>
</template>

效果

作用域插槽 slot-scope

在使用作用域插槽时，我们要知道一个东西
根据vue官方的说法：
父组件模板的所有东西都会在父级作用域内编译；
子组件模板的所有东西都会在子级作用域内编译。

举个例子：
我们在父组件和子组件中，同时定义一个name属性
父组件name:"张三"
子组件name:"李四"
然后在父组件中，使用子组件，并使用子组件中的插槽，向子组件中插入一个 name 变量，那么这个name的值，在父组件中被调用，就会使用父组件中的name:"张三"，这就是它作用域限制

<slotTest>{{ name }}
</slotTest>

但是，作用域插槽，允许父组件调用子组件内部的数据，子组件的数据通过slot-scope属性传递到了父组件

举个例子：
父组件

<template>
<!-- 父组件 --><div><slotTest><template slot-scope="fromChildList">{{ fromChildList }}</template></slotTest></div>
</template>
<script>
import slotTest from "./slotTest";export default {components: {slotTest,},
};
</script>

子组件

<template><!-- 子组件 --><div><slot :childList="list"> </slot></div>
</template>
<script>
export default {data() {return {list: [{name: "张三",age: "24",},{name: "李四",age: "24",},],};},
};
</script>

这里说一下一个！！非常重要的！！东西
slot-scope 会将接收到东西转化为对象的形式，这里就是 slot-scope 接收的是一个参数，并命名为 fromChildList，
这里将参数打印出来看看

所以我们如果想使用这个数据中的某一项数据，就要写成
{{ fromChildList.childList[0].name }}的形式，这样就可以获取到name=张三了