vue 插槽

1 插槽

• 子组件写插槽位置

• 父组件写内容放入插槽

• 插槽内容无法访问子组件的数据

• 非作用域插槽

  • 默认插槽： 123
  • 具名插槽：
    • 不简写：
  • 简写：
  • 具名与默认 插槽同时使用：
    • 自定义：#header，#xxx
  • 默认：#default，或者不写

• 作用域插槽：使父组件写的插槽的内容访问到子组件的数据

  • 默认作用域插槽
    • 不解构： {{ slotProps.text }}
    • 解构： {{ text }} {{ count }}
  • 具名作用域插槽：
  • 具名与默认 作用域插槽同时使用：
  • 不能使用：
  • 能使用：

1.1 默认插槽

<template>
  <view>
    <solt>solt>
  view>
template>
1
2
3
4
5
6

<hello>
  <view>111view>
hello>
1
2
3
4

1.2 插槽设置默认内容

<template>
  <view>
    <solt>我是默认内容solt>
  view>
template>
1
2
3
4
5
6

<hello>
  <view>我能替代默认内容view>
hello>
1
2
3
4

1.3 具名插槽

• name 的插槽被称为具名插槽 (named slots)。
• 没有提供 name 的 出口会隐式地命名为“default”。
• 要为具名插槽传入内容，需要使用一个含 v-slot 指令的