（1）將slot = ‘title’的標簽元素插到name= ‘title’的slot中，即slot的值與相應插槽的name值要一致；
（2）若組件模板中設置了匿名的slot，則父組件中未匹配的內容會插入到此匿名slot中，ps:匿名<slot></slot>；
（3）若組件模板中存在父組件沒有的標簽元素，則繼續使用，不受父組件影響；
（4）若父組件中存在不匹配組件模板的標簽元素，且組件模板中也沒有匿名slot，則該標簽元素渲染時直接被忽略；
（5）在父組件中可以定義多個相同的slot屬性的DOM標簽，會依次插入到匹配的組件模板中，以兄弟節點呈現（vue2.0中一個slot只被使用一次）；
（6）父組件作用域與組件模板作用域分開，兩者綁定的數據在各自的作用域內編譯；
1 <!DOCTYPE html> 2 <html xmlns:v-bind="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <link rel="stylesheet" href="../css/bootstrap.min.css"/> 8 <script src="../js/vue.js"></script> 9 <title>modal實例</title> 10 </head> 11 <body> 12 <!--modal組件模板--> 13 <script id="modalTpl" type="x-template"> 14 <div role="dialog"> 15 <div role="document" v-bind:style="{width: optionalWidth}"> 16 <div class="modal-content"> 17 <slot name="modal-header"> 18 <div class="modal-header"> 19 <button type="button" class="close" @click="close"> 20 <span>×</span> 21 </button> 22 <h4 class="modal-title"> 23 <slot name="title">{{title}}</slot> 24 </h4> 25 </div> 26 </slot> 27 <slot name="modal-body"> 28 <div class="modal-body"></div> 29 </slot> 30 <slot name="modal-footer"> 31 <div class="modal-footer"> 32 <button type="button" class="btn btn-default" @click="close">取消</button> 33 <button type="button" class="btn btn-primary" @click="callback">確定</button> 34 </div> 35 </slot> 36 </div> 37 </div> 38 </div> 39 </script> 40 41 <!--父組件調用方式--> 42 <div id="app"> 43 <button @click="show = true">open</button> 44 <modal :show.sync="show" v-if="show" width="300px" :callback="close"> 45 46 <!--替換modal組件中的 <slot name="modal-header">里面內容省略</slot> 插槽--> 47 <div slot="modal-header" class="modal-header">Title</div> 48 49 <!--替換modal組件中的 <slot name="modal-body"></slot> 插槽--> 50 <div slot="modal-body" class="modal-body"> 51 <div class="inner">content</div> 52 </div> 53 54 <!--此div直接被省略--> 55 <div>xxxxxx</div> 56 57 <!--父組件中沒有 <div slot="modal-footer"></div>,所以使用子組件默認的html結構--> 58 </modal> 59 </div> 60 <script> 61 // 注冊modal組件 62 Vue.component('modal',{ 63 template:'#modalTpl',// 獲取模板中html結構 64 props:{ 65 title:{ 66 type: String, 67 default: '' 68 }, 69 show: {// 控制modal是否顯示 70 required: true, 71 type: Boolean, 72 twoWay: true 73 }, 74 width: { 75 default: null 76 }, 77 callback: { 78 type: Function, 79 default: function () { 80 81 } 82 } 83 }, 84 computed: {//計算屬性 85 optionalWidth () { //處理props中modal寬度的屬性 86 if (this.width === null) { 87 return null; 88 }else if(Number.isInteger(this.width)) {// Number.isInteger 是es6中判斷一個數是否是整數 89 return this.width + 'px'; 90 } 91 return this.width; 92 } 93 }, 94 watch: { 95 show (val) {// show值變化時調用該函數 96 var el = this.$el; 97 if(val) { 98 el.style.display = 'block'; 99 } else { 100 el.style.display = 'none'; 101 } 102 } 103 }, 104 methods: { 105 close () { 106 this.show = false; 107 } 108 } 109 }); 110 111 let vm = new Vue({ 112 el : '#app', 113 data : { 114 show : false 115 }, 116 methods: { 117 close: function () { 118 alert('save'); 119 this.show = false; 120 } 121 } 122 }); 123 </script> 124 </body> 125 </html>