vue2.6插槽更新v-slot用法总结

在 Vue 2.6.0 版本中，我们对具名插槽和作用域插槽进行了一次重大的更新，引入了全新的统一语法——v-slot 指令。这一改变，不仅简化了插槽的使用，也使得代码更加易于理解和维护。

```vue

```

在子组件中，我们使用 `` 标签来定义默认插槽的内容：

```vue

我是默认值

```

接下来，我们来看看具名插槽。与匿名插槽不同，具名插槽需要我们在父页面中通过 v-slot 指令指定具体的名字。例如：

```vue

```

在子组件中，我们使用 name 属性来定义具名插槽的名字：

```vue

我是默认值

```

我们还可以动态地改变具名插槽的名字。例如，通过 v-slot 指令绑定一个动态的名字：

```vue

v-slot:{dynamicSlotName}

```

除了以上的基本用法，v-slot 指令还有许多高级用法，例如缩写形式。我们可以使用 符号来代表 v-slot 指令，使代码更加简洁。例如：

```vue

todo 等价于 v-slot:todo

default 等价于 使用匿名插槽的 v-slot 指令

```

作用域插槽

让我们深入理解作用域插槽及其使用方式。重点在于`slotProps`接收子组件中的属性数据，如`user="user"`和`test="test"`。

父页面示例：

```html

```

在此示例中，`slotProps`可以随意命名，它接收的是子组件标签`slot`上属性数据的集合，例如`v-bind:user="user"`。

子组件示例：

```html

{{ user.lastName }}

```

在这里，`{{ user.lastName }}`是默认数据，当父页面没有定义`slotProps`时，将显示“Zhang”。

解构插槽Prop

对于父页面，我们可以使用解构来简化代码。例如：

```html

```

这里，我们使用了解构来直接获取`user`和`test`，使得代码更简洁。我们还可以给解构的变量起别名，如`{user: person, test}`。

关于“独占默认插槽缩写”，在实际应用中可能机会较少，需要视具体情况而定。重要的是理解好v-slot的使用场景和方式。

todo-list实例说明

让我们通过一个实例来更好地理解。

父页面：

```html