vue slot 插槽的使用

Vue中的slot对于编写可复用可扩展的组件是再合适不过了，这里主要讲两种使用情况，匿名与有名：

1. 插入一个匿名的slot，匿名的情况只适用于只插入一个的时候；
   
2. 插入有名的slot，当插入的slot有多个的时候，需要按名占位；
   

首先我们看下父页面是如何调用的，父页面调用button_list子组件，若要绑定事件，可以直接绑定在父页面

                <button_list>
                    <!--有名插槽，例如 slot="btnSubmit"命名-->
                    <template slot="btnSubmit">
                        <button type="button" class="btn-icon btn btn-width">
                            FormPrint1
                        </button>
                    </template>
                    <!--匿名插槽-->
                    <slot>
                        <button type="button" class="btn-icon btn btn-width">
                            FormPrint2
                        </button>
                    </slot>
                </button_list>

button_list子组件html内容如下：

                <!--有名插槽，会根据name显示在slot对应的位置-->
                <slot name="btnSubmit"></slot>
                
                <!--匿名插槽显示-->
                <slot></slot>