系統城裝機大師 - 唯一官網：www.farandoo.com！

打印機 |投影機 |數據庫 |CMS教程 |服務器設置 |網頁制作 |網絡編程 | 腳本專欄 |重裝教程 | 如何安裝系統？ |
網站導航

系統下載

Win10系統 Win8系統 Win7系統 WinXP系統 路由器

軟件下載

電腦軟件 安卓軟件 安卓應用 安卓游戲

文章資訊

IT資訊 系統教程 軟件教程 U盤教程 系統幫助

系統相關

系統主題 Win10激活工具 Win8激活工具 Win7激活工具

專題合集

軟件合集 教程專題 安卓推薦
電腦配置
配置清單 品牌機 組裝機 一體機 筆記本
軟件
  • 軟件
  • 文章
  • 安卓
搜 索

熱搜：番茄花園 電腦公司 蘿卜家園 深度技術 雨林木風

首頁 XP系統 Win7系統 Win10系統 win11系統 在線裝機 U盤啟動 系統教程 IT資訊
Win8系統 Linux系統 Server系統 MacOS系統 U PE教程 重裝大師 裝機精靈 網絡知識 bios設置 電腦配置
當前位置：首頁 > 網絡編程 > JavaScript > 詳細頁面

vue 使用插槽分發內容操作示例【單個插槽、具名插槽、作用域插槽】

時間：2020-03-06來源：電腦系統城作者：電腦系統城

本文實例講述了vue 使用插槽分發內容操作。分享給大家供大家參考，具體如下：

單個插槽

除非子組件模板包含至少一個 <slot> 插口，否則父組件的內容將會被丟棄。當子組件模板只有一個沒有屬性的插槽時，父組件傳入的整個內容片段將插入到插槽所在的 DOM 位置，并替換掉插槽標簽本身。

最初在 <slot> 標簽中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯，并且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。

例：


 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 測試實例 - 單個插槽</title>
  6. <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9.  
  10. <div id="example">
  11. <div>
  12. <h1>我是父組件的標題</h1>
  13. <my-component>
  14. <p>這是一些初始內容</p>
  15. <p>這是更多的初始內容</p>
  16. </my-component>
  17. </div>
  18. </div>
  19.  
  20.  
  21. var childNode = {
  22. //當沒有<slot>時，父組件的其他內容不會顯示，當有<slot>時，要是父組件中的內容不為空，<slot>
  23. //中的內容就不會顯示
  24. template: `
  25. <div>
  26. <h2>我是子組件的標題</h2>
  27. <slot>
  28. 只有在沒有要分發的內容時才會顯示。
  29. </slot>
  30. </div>
  31. `,
  32. };
  33. // 創建根實例
  34. new Vue({
  35. el: '#example',
  36. components: {
  37. 'my-component': childNode
  38. }
  39. })
  40. </script>
  41. </body>
  42. </html>
  43.  

vue 使用插槽分發內容操作示例【單個插槽、具名插槽、作用域插槽】

具名插槽

<slot> 元素可以用一個特殊的特性 name 來進一步配置如何分發內容。多個插槽可以有不同的名字。具名插槽將匹配內容片段中有對應 slot 特性的元素。

仍然可以有一個匿名插槽，它是默認插槽，作為找不到匹配的內容片段的備用插槽。如果沒有默認插槽，這些找不到匹配的內容片段將被拋棄。


 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 測試實例 - 具名插槽</title>
  6. <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9.  
  10. <div id="example">
  11. <app-layout>
  12. <h1 slot="header">這里可能是一個頁面標題</h1>
  13.  
  14. <p>主要內容的一個段落。</p>
  15. <p>另一個主要段落。</p>
  16.  
  17. <p slot="footer">這里有一些聯系信息</p>
  18. </app-layout>
  19. </div>
  20. <script>
  21. Vue.component('app-layout',{
  22. template:'<div class="container">'+
  23. '<header>'+
  24. '<slot name="header"></slot>'+
  25. '</header>'+
  26. '<main>'+
  27. '<slot></slot>'+
  28. '</main>'+
  29. '<footer>'+
  30. '<slot name="footer"></slot>'+
  31. '</footer>'+
  32. '</div>'
  33. })
  34.  
  35. // 創建根實例
  36. new Vue({
  37. el: '#example',
  38.  
  39. })
  40. </script>
  41. </body>
  42. </html>
  43.  

vue 使用插槽分發內容操作示例【單個插槽、具名插槽、作用域插槽】

作用域插槽

作用域插槽是一種特殊類型的插槽，用作一個 (能被傳遞數據的) 可重用模板，來代替已經渲染好的元素。

在子組件中，只需將數據傳遞到插槽，就像你將 prop 傳遞給組件一樣：


 
  1. <div class="child">
  2. <slot text="hello from child"></slot>
  3. </div>
  4.  

在父級中，具有特殊特性 slot-scope 的 <template> 元素必須存在，表示它是作用域插槽的模板。slot-scope 的值將被用作一個臨時變量名，此變量接收從子組件傳遞過來的 prop 對象：

在 2.5.0+，slot-scope 能被用在任意元素或組件中而不再局限于 <template>。


 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 測試實例 - 作用域插槽</title>
  6. <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9.  
  10. <div id="example">
  11. <parent-com></parent-com>
  12. </div>
  13. <script>
  14. Vue.component('child-com',{
  15. template:'' +
  16. '<ul>' +
  17. ' <slot name="child-ul" v-for="item in animal" v-bind:text="item.name"></slot>' +
  18. '</ul>',
  19. data:function(){
  20. return {
  21. animal:[
  22. {name:'大象'},
  23. {name:'小狗'},
  24. {name:'小貓'},
  25. {name:'老虎'}
  26. ]
  27. }
  28. }
  29. });
  30. //父組件
  31. // 在父組件的模板里，使用一個Vue自帶的特殊組件<template> ，
  32. // 并在該組件上使用scope屬性，值是一個臨時的變量，存著的是由子組件傳過來的
  33. // prop對象，在下面的例子中我把他命名為props。
  34. // 獲得由子傳過來的prop對象。這時候，父組件就可以訪問子組件在自定義屬性上暴露的數據了。
  35. Vue.component('parent-com',{
  36. template:'' +
  37. '<div class="container">' +
  38. '<p>動物列表</p>' +
  39. '<child-com>' +
  40. ' <template scope="props" slot="child-ul">' +
  41. ' <li class="child-ul">{{ props.text }}</li>' +
  42. ' </template>' +
  43. '</child-com>' +
  44. '</div>'
  45. });
  46.  
  47. // 創建根實例
  48. new Vue({
  49. el: '#example',
  50.  
  51. })
  52. </script>
  53. </body>
  54. </html>
  55.  

希望本文所述對大家vue.js程序設計有所幫助。

分享到：

相關信息

Vue3 響應式偵聽與計算的實現
詳解mybatis-plus配置找不到Mapper接口路徑的坑
SpringBoot下使用MyBatis-Puls代碼生成器的方法

熱門系統總排行

裝機必備

系統教程欄目

Win10教程 重裝大師 重裝教程 bios 其它教程 系統幫助 蘋果MAC教程 Linux教程 Win2003教程 Win2008教程 U盤教程 WinXP教程 Win7教程 Win8教程 軟件教程 win11教程 打印機

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

軟件發布| Tag標簽| 版權聲明| 網站地圖| 軟件專題| sitemap| 系統城一鍵重裝系統QQ群

本站發布的系統與軟件僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！如侵犯到您的權益,請及時通知我們,我們會及時處理。

皖ICP備11004271號-6版權所有：固鎮縣祥瑞電腦科技銷售部

jlzzjlzz亚洲乱熟在线播放