官方文件
先上**父元件我是父元件
default="user">
}子元件
正文1. 預設插槽適用方式
父元件
我還是預設插槽的內容
子元件
2. 具名插槽
父元件 2.6之前寫法
我還是預設插槽的內容命名插槽
我是預設插槽
子元件
2.6.0 版本之後 slot slot-scope(子向父傳值)都被廢棄 同意使用v-slot
父元件
}
3.傳值
向子插槽傳值 就是父子元件傳值·
子向父傳值
slot-scope 已經廢棄的用法
父元件哇哈哈}
子元件
最新玩法
}-->
簡寫
簡寫 }-->
值可以解構 追加
}-->
重新命名
} -->
追加 } -->
定義預設內容 也就是當子元件插槽沒傳值的時候
v-slot=" }"動態插槽命名
...
預設插槽簡寫
當只有預設插槽當前元件上寫
父元件}
子元件簡寫父元件 預設插槽 將引數寫在父元件上 必須帶上default
}
父級模板裡的所有內容都是在父級作用域中編譯的;子模板裡的所有內容都是在子作用域中編譯的。
遇事不懂 官方文件
vue slot插槽的使用
vue官方文件在slot這部分講解的並不是很詳細,這裡用更通俗的語言進行描述。根據官檔的標題來開始吧 假如父元件的 如下 children為註冊的子元件 這裡是插槽的內容,位於子元件內部 渲染結果 這裡是子元件,注意 沒有加入slot標籤哦!上面的 實際效果如下 這裡是父元件 這裡是子元件,注意 沒...
Vue slot 插槽的使用
slot插槽作為分發內容的出口 假設看這篇文章的你已經有了一定的vue元件基礎 let btn vue.component btn template 1 上述 建立了乙個名為btn的全域性元件。接下來我們在其他頁面中呼叫這個外掛程式 let vm new vue template 得到的頁面效果如下...
Vue slot插槽的使用
lang en charset utf 8 插槽title head slot slot1 up value data title up slot slot2 down value book v for book in books down shouhe div src script src scr...