<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                [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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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標簽** 是沒有辦法直接 **綁定事件** 的
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看