vue我自己還在摸索學習中，今天學習了使用 Slot 分發內容，給自己留個小筆記
使用slot分發內容我們要注意2點
<app> 組件不知道它會收到什么內容。這是由使用 <app> 的父組件決定的。
<app> 組件很可能有它自己的模板。
為了讓組件可以組合，我們需要一種方式來混合父組件的內容與子組件自己的模板。
【案例】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue-Slot 分發內容</title> <script type="text/javascript" src="js/vue.js"></script> <style> .sf{ margin: 10px; width: 150px; border: 1px solid #ccc; } .sf-header,.sf-bottom{ height: 30px; background: sandybrown; } .sf-body{ min-height: 100px; } </style></head><body> <div id="app"> <shoufa> <h2 slot="title">學習vue</h2> <p>Vue.js（讀音 /vjuː/，類似于 view） 是一套構建用戶界面的漸進式框架。 與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。 Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合</p> <h4 slot="bottom">vue很好學</h4> </shoufa> </div> <script type="text/x-template" id="sfTpl"> <div class="sf"> <div class="sf-header"><slot name="title"></slot></div> <div class="sf-body"> <slot></slot> </div> <div class="sf-bottom"><slot name="bottom"></slot> </div> </div> </script> <script> var sf ={ template:"#sfTpl", } var app = new Vue({ el:"#app", components:{ 'shoufa':sf } }) </script></body></html>結果如下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
