vue 插槽的使用

  • vue 插槽手册
  • 深入理解vue中的slot与slot-scope

插槽的使用其实是很简单
首先要明白插槽是使用在子组件中的
2、插槽是为了将父组件中的子组件模板数据正常显示

  • demo1

这里是父组件

菜单1 菜单2 菜单3
vue 插槽的使用_第1张图片
demo1 结果
  • demo2

这里是父组件

菜单1 菜单2 菜单3
vue 插槽的使用_第2张图片
demo2 结果

具名插槽

  • demo3

这里是父组件

菜单1 菜单2 菜单3

具名插槽其实就是在父组件中添加一个 slot='自定义名字' 的属性,
然后在子组件中的 里面添加 name='自定义名字' 即可
如果父组件中有一部分没有添加 slot 属性,则此处就是默认的插槽,在子组件中的 直接就是使用的父组件的默认插槽部分

vue 插槽的使用_第3张图片
demo3

作用域插槽

父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
不过,我们可以在父组件中使用 slot-scope 特性从子组件获取数据
前提是需要在子组件中使用 :data=data 先传递 data 的数据

  • demo4

这里是父组件

{{user.data}}
vue 插槽的使用_第4张图片
demo4

你可能感兴趣的:(vue 插槽的使用)