Vue学习12--插槽

Vue学习12–插槽

什么是插槽

插槽是子组件提供给父组件使用的一个占位符，用，父组件可以在这个占位符中填充任何模板代码，如HTML，组件等，填充的内容会替换子组件中的slot标签。相当于在子组件中放置了一个占位符，父组件传递进来的html片段会被加载到这个占位符的地方。
​
简单理解就是，在子组件内占坑，在父组件里填坑。 放在组件元素之间的html片段会被插槽占位符进行加载。
​

插槽如何使用

1、在子组件中使用插槽组件 指定插槽的名字：
2、使用方：在父组件引入的子组件元素之间直接添加需要传递的html片段：<组件标签> 传递hmtl片段

还可以指定插槽名字，把html片段放置在指定插槽位置
1）<组件标签>

2）
​

插槽传值：

子向父，插槽是一个slot标签,所以采用属性传值的方式传值
​
在父组件中使用,在组件元素之间插入html片段，有两种接收数据的方法：
1）slot-scope=“接收到的数据”
2）
​
注：
1） v-slot只能在template标签里使用，否者会报错。
2） 以上两种方式接收到的数据，都是传递过来对象封装的一个整体对象，哪怕只有一个传递的参数也要通过"."或中括号[]的方式去获取参数的值。

父向子，直接按照正常的父向子传递数据就行。

示例

父组件 index.vue

​

子组件 List.vue

​