1全局组建
<div id="app"> <my-date></my-date> </div> <div id="app1"> <my-date></my-date> </div> <script> //<!--组建构造器--> //1 创建组建 let Profile = Vue.extend({ //1.1模版选项 template:` <div> <input type="date"> <p>今天已经是凌晨了</p> </div> ` }); //2 注册全局组建 Vue.component('my-date',Profile); new Vue({ el:"#app", data:{ msg:'今天还是要赚钱' } }); new Vue({ el:"#app1", data:{ msg:'今天还是要赚钱' } }); </script>
2.局部组建
<div id="app"> <my-date></my-date> </div> <script> //1.组建构造器 let profile = Vue.extend({ //1.模版选项 template:` <div> <input type="text"> <p>组建模版1</p> </div> ` }); let profile2 = Vue.extend({ //1.模版选项 template:` <div> <input type="text"> <p>组建模版2</p> </div> ` }); new Vue({ el:"#app", components:{ //局部组建的钩子选项 只能存在与#app中 'my-date':profile }, }); </script>
全局+局部组建精简写法
<div id="app"> <my-date></my-date> <my-model></my-model> </div> <script> //1.全局组建简易版 Vue.component('my-date',{ //1.组建名+模版 template:` <div> <input type="text"> <p>组建模版精简版</p> </div> ` }) new Vue({ el:"#app", components:{ 'my-model':{ template:` <div> <p>组建模版精简版2</p> </div> ` } } }); </script>