使用Vue开发网站之路3-slot内容分发实现基础表单，衍生表单

	slot这个东西我一开始还不太好理解，以为之前完全没有那样的思想，就是插槽，占位。这个占位我只知道回调。没想到内容也可以占位。

	我为什么要实现个基础表单，衍生表单呢。一是因为这些表单都有共同点就是都是可选删除，地下都有上一页，写一页，每页标签。

把这些共同点整理到一个基础表单里让我很舒服。第二：我要加深对slot的理解。看看它到底好不好用。

	具体实现方案就是基本组件里面有slot，这个slot有一个name的属性，对应衍生表单的slot。
	例如基础的<slot name="header">这个将会被<div slot="header">这里放置一些搜索或者排序(后续添加)</div>替换。
这里面我碰到了一个问题就是我要动态的生成每页标签。本来是用v-html把实现的每页标签做成计算参数放到paging的div里面，结果浏览器只解析了html，里面的事件vue并没有解析。
这个原因网上说是没有再次编译，但是我持保留意见，因为当我把v-for实现的时候是没问题的。当然v-for里面的参数也是计算参数。这个计算参数其实就是坑爹的属性值。只不过在
标签里面没法获取。

    //基本表格组件，内容由父组件决定
    Vue.component("base-table",{
        props:["totalPage","tableClass"],
        template:'<div><slot name="header"></slot>\
                    <table :class="tableClass">\
                    <slot name="row-th"></slot>\
                    <slot name="row-rd"></slot>\
                    </table>\
                    <div class="down-buttons clearfix"><div class="tab-button" @click="deleteTarget">删除</div><div class="tab-button" @click="lastPageTarget">上一页</div>\
                    <div class="paging"><span v-for="i in pageHtml" @click="jumpToTarget($event)">{{i}}</span></div><div class="tab-button" @click="previousPageTarget">下一页</div></div>\
                    </div>',
        computed:{
            pageHtml:function() {
                return parseInt(this.totalPage);
            }
        },
        methods:{
            deleteTarget:function() {
                this.$emit('deleteAll');
            },
            lastPageTarget:function() {
                this.$emit("lastPage");
            },
            previousPageTarget:function() {
                this.$emit("previousPage");
            },
            jumpToTarget:function(event) {
                this.$emit("jumpTo",event);
            }
        }
    });
//这个是衍生表单

	Vue.component("publish-table",{
		template:'<base-table class="outer-tab" :tableClass="tabClass" :totalPage="total" @deleteAll="deleteAllP" @lastPage="lastPageP" \
					@previousPage="previousPageP" @jumpTo="jumpToP">\
					<div slot="header">这里放置一些搜索或者排序(后续添加)</div>\
					<tr class="pub-tr" slot="row-th"><th>选择</th><th>商品名</th><th>价格</th><th>数量</th></tr>\
					<tr class="pub-tr" slot="row-rd" v-for="item in listProduct.list"><td><input type="checkbox"></input></td><td>{{item.name}}</td><td>{{item.price}}</td><td>{{item.quantity}}</td></tr>\
				  </base-table>',
		data:function() {
			return {
				listProduct:"",
				tabClass:"tab-class"
			}
		},
		computed:{
			total:function(){
				return this.listProduct.total;
			}
		},
		mounted:function() {
			this.listProduct = getProductList()
		},
		methods:{
			deleteAllP:function() {
				alert("deleteAllP");
			},
			lastPageP:function() {
				alert("lastPageP");
			},
			previousPageP:function() {
				alert("previousPageP");
			},
			jumpToP:function() {
				alert("jumpToP");
			}
		}
	});