slot的使用实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Title</title> <!-- Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script> </head> <body> <div id="box"> <rk-form action="register.php" method="post" enctype="application/x-www-form-urlencoded"> <rk-panel slot="content"> <h4 slot="paneltitle">注册</h4> <rk-input itype="text" ititle="用户" iplace="请输入用户" iname="username" slot="panelcontent"></rk-input> <rk-input itype="password" ititle="密码" iplace="请输入密码" iname="password" slot="panelcontent"></rk-input> <rk-input itype="password" ititle="确认密码" iplace="请再输入一次密码" iname="password2" slot="panelcontent"></rk-input> <rk-input itype="email" ititle="邮箱" iplace="请输入邮箱" iname="email" slot="panelcontent"></rk-input> <rk-input itype="text" ititle="电话" iplace="请输入电话" iname="phone" slot="panelcontent"></rk-input> <rk-button btitle="注册" btype="submit" slot="panelButton"></rk-button> <rk-button btitle="重置" btype="reset" slot="panelButton"></rk-button> </rk-panel> </rk-form> </div> <script type="text/x-template" id="form"> <form :action="action" :method="method" :enctype="enctype"> <slot name="content">表单内容</slot> </form> </script> <script type="text/x-template" id="panel"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title"> <slot name="paneltitle">panel标题</slot> </div> </div> <div class="panel-body"> <slot name="panelcontent">panel主体</slot> <slot name="panelButton">panel按钮</slot> </div> </div> </script> <script type="text/x-template" id="rkInput"> <div class="form-group"> <label for="" class="control-label col-sm-2">{{ititle}}</label> <div class="form-group col-sm-9"> <input :type="itype" :name="iname" class="form-control" :placeholder="iplace"> </div> </div> </script> <script type="text/x-template" id="rkButton"> <span class="form-group text-right col-sm-1"> <button class="btn btn-primary" :type="btype">{{btitle}}</button> </span> </script> <script type="text/javascript"> var rkForm = { props:['action','method','enctype'], template:'#form' }; var rkPanel = { template:'#panel' }; var rkInput = { props:['itype','ititle','iplace','iname'], template:'#rkInput', }; var rkButton = { props:['btitle','btype'], template:'#rkButton', }; var app = new Vue({ el:'#box', components:{rkForm,rkPanel,rkInput,rkButton}, }); </script> </body> </html>
效果如下: