03.vue的插槽
阿新 • • 發佈：2018-11-24
在Vue中使用插槽(slot)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在Vue中使用插槽(slot)</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="root"> <!-- <child content="<p>Dell</p>"></child> --> <!-- 插槽(slot) --> <child> <!-- 父元件內可以傳遞插槽內容。 --> <h1>Dell</h1> </child> </div> </body> <script> // 使用插槽(slot)，子元件更方便的給父元件傳遞dom資料。// 全域性元件，子元件 Vue.component('child', { // props:['content'], // p標籤外層多了一個div標籤 // template:`<div> // <p>hello</p> // <div v-html="this.content"></div> // </div>` template:`<div> <p>hello</p> <slot>預設內容</slot> </div>` }); var vm= new Vue({ el:'#root' }); </script> </html>
在Vue中使用插槽(slot)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在Vue中使用插槽(slot)</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="root"> <child> <!-- 父元件內可以傳遞插槽內容。 --> <!-- 頭部 --> <div class="header" slot="header">header</div> <!-- 尾部 --> <div class="footer" slot="footer">footer</div> <!-- 預設值 --> </child> </div> </body> <script> // 使用插槽(slot)，子元件更方便的給父元件傳遞dom資料。 // 注意：插槽要取名字，不然呼叫多次相同內容。具名插槽可以有多個。 // 父元件沒有傳值是，用預設值。 // 全域性元件，子元件 Vue.component('child', { data:function(){ return{ } }, template:`<div> <slot name="header"></slot> <div class="content">content</div> <slot name="footer"></slot> <slot name="moren"> <h1>default</h1> </slot> </div>` }); var vm = new Vue({ el:'#root' }); </script> </html>
Vue中的作用域插槽