Vue3之插槽

含义

简而言之,就是父组件提供的插槽内容(Click me)替换插槽出口(slot)


插槽示意图

默认插槽

// FancyButton.vue

// 父组件使用

  Click me! 

具名插槽

// 父组件使用

  // v-slot:header的简写形式就是#header
  
  // 默认插槽,#default不写也可以,会往没有name的slot插槽替换
  

  


// BaseLayout.vue
具名插槽示意图

动态插槽

// dynamicSlotName可以是一个变量,动态的名称

  

  
  

作用域插槽

插槽的内容无法访问到子组件的状态,如果需要访问子组件的数据就需要使用作用域插槽了。


{{ slotProps.text }} {{ slotProps.count }} // 也可以使用解构的方式 {{ text }} {{ count }}
作用域插槽示意图

你可能感兴趣的:(Vue3之插槽)