内容分发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="{ 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>&times;</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                      {
 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>