&_this.$slots.default是什么">
当前位置:   article > 正文

关于Vue中插槽的理解和总结_this.$slots.default是什么

this.$slots.default是什么
  1. 插槽作用: 我的理解大概就是子组件留了个坑坑,父组件如果有需要就可以往那个坑坑里面放一些其他的组件和模板。
  2. 插槽类型:default插槽,具名插槽,作用域插槽
  • default插槽:就是默认插槽,所有没有名字的插槽都会被放入this.$slots.default中,包分配。
  • 具名插槽:具名插槽就是有名字的插槽,组件和模板申明了你的名字,就把他放在你的槽槽里。
  1. 子组件:child.vue
  2. <templete>
  3. <div>
  4. <slot name="slotdemo"></slot>
  5. </div>
  6. </templete
  7. 父组件:
  8. <templete>
  9. <child>
  10. <h v:slot="slotdemo">SlotDemo</h>
  11. </child>
  12. </templete>
  • 作用域插槽:作用域插槽就是父组件用子组件的插槽的时候,槽槽里面的组件和模板可以去拿到子组件从槽槽那边绑过来的数据
  1. 子组件:child.vue
  2. <templete>
  3. <div>
  4. <slot :slotData="data"></slot>
  5. </div>
  6. </templete>
  7. <script>
  8. export default{
  9. data(){
  10. return{
  11. data:'哈哈哈'
  12. }
  13. }
  14. </script>
  15. 父组件:
  16. <templete>
  17. <child>
  18. <h slot-scope="data">{{data.data}}</h>
  19. </child>
  20. </templete>
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/106209
推荐阅读
相关标签
  

闽ICP备14008679号