Vue3:插槽v-slot

几种插槽

  • 匿名插槽
  • 具名插槽
  • 作用域插槽
  • 动态插槽

v-slot的简写方式



<========匿名插槽-简写==========>








<========具名插槽-简写==========>

匿名插槽 和 具名插槽

父组件:


子组件:



作用域插槽

父组件:


子组件:


动态插槽

父组件:



子组件:同作用域插槽代码一致

效果图:

Vue3:插槽v-slot_第1张图片

总结

和vue2中插槽的使用基本没有差别~~~

你可能感兴趣的:(vite,vue3,vue.js,前端)