vue slot與slot-scope的區別與使用

> 注意:以下示例以最新版本vue為主,最低需要2.6.0版本

一、具名組件簡單示例

<code> 

{{ msg }}

/<code>

template模板官方使用說明:https://cn.vuejs.org/v2/api/#template

二、作用域插槽slot-scope

> slot-scope就是把組件內的數據拿出來在模板裡渲染(實現子父組件通信),名稱可以為任意, 也可以直接使用解構賦值

<code> 


        
            {{ msg }}
            
  • 姓名:{{ v.name }} 年齡:{{ v.age }}
/<code>

slot-scope官方使用說明:https://cn.vuejs.org/v2/guide/components-slots.html#%E5%B8%A6%E6%9C%89-slot-attribute-%E7%9A%84%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD


分享到:


相關文章: