内容分发slot的用法
（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>
