使用匿名插槽和具名插槽解決組件內容傳遞問題 · vue筆記

[TOC] >[success] # 使用匿名插槽和具名插槽解決組件內容傳遞問題 ![](https://img.kancloud.cn/44/95/44959a263d09c0f9581168b801e0b85d_355x43.png) 需求：如圖，封裝了一個 **表單組件** ，但是 **按鈕不想固定，假如說按鈕的位置：我想展示一個div就展示div，想展示button就展示button** ，用 **slot插槽** 就能解決我們的問題。 >[success] ## 匿名插槽 **匿名插槽** ： **就是沒有名稱的插槽隨插隨用** ，缺點，只有 **使用一個插槽時候可以使用，同時使用多個插槽時候，就不知道插入到哪里了** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用插槽和具名插槽解決組件內容傳遞問題</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // slot 插槽 // slot 中使用的數據，作用域的問題 // 父模板里調用的數據屬性，使用的都是父模板里的數據 // 子模板里調用的數據屬性，使用的都是子模板里的數據 // 父組件 const app = Vue.createApp({ data(){ return { text: '提交' } }, template: ` <myform> <div>{{text}}</div> </myform> <myform> <button>{{text}}</button> </myform> <myform></myform> ` }) // 子組件 app.component('myform', { methods: { handleClick(){ alert(123) } }, template: ` <div> <input /> <span @click="handleClick"> <slot>默認值占位符</slot> </span> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 具名插槽 **具名插槽**： **明確指定 name ，給對應 name 的 slot 標簽中添加對應的內容** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用插槽和具名插槽解決組件內容傳遞問題</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // slot 插槽 // slot 中使用的數據，作用域的問題 // 父模板里調用的數據屬性，使用的都是父模板里的數據 // 子模板里調用的數據屬性，使用的都是子模板里的數據 // 具名插槽 // 父組件 const app = Vue.createApp({ template: ` <layout> <template v-slot:header> <div>header</div> </template> <template v-slot:footer> <div>footer</div> </template> </layout> ` }) // 子組件 app.component('layout', { template: ` <div> <slot name="header"></slot> <div>content</div> <slot name="footer"></slot> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 使用 **具名插槽** 時， **父組件** 中要用 **template標簽包裹** ，然后寫上 **v-slot:插槽名稱** ，在 **template標簽包裹** 中寫要 **插入的內容** 。 >[success] ### 具名插槽語法簡寫可以把 **template標簽** 上的 **v-slot:header** ，簡寫成 **#header** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用插槽和具名插槽解決組件內容傳遞問題</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // slot 插槽 // slot 中使用的數據，作用域的問題 // 父模板里調用的數據屬性，使用的都是父模板里的數據 // 子模板里調用的數據屬性，使用的都是子模板里的數據 // 具名插槽 // 父組件 const app = Vue.createApp({ template: ` <layout> <template #header> <div>header</div> </template> <template #footer> <div>footer</div> </template> </layout> ` }) // 子組件 app.component('layout', { template: ` <div> <slot name="header"></slot> <div>content</div> <slot name="footer"></slot> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[warning] ## 注意 1. 使用 **slot插槽** 時，必須要用 **雙標簽包裹** 2. **slot標簽** 是沒有辦法直接 **綁定事件** 的