注意:无论哪种定义方式,组件的要标签只能有1个,多余的不会显示也不报错,默认显示第一个标签
vue创建组件的三种方式:
第一种:
<div id="app"> <com1></com1> </div> <script> var com1 = Vue.extend({ template: '<div>com1 组件</div>' }); Vue.component('com1', com1); new Vue({ el: '#app', }); </script>
第二种:
<div id="app"> <com1></com1> </div> <script> Vue.component('com1', Vue.extend({ template: '<h1>com1组件</h1>' })); //或者 // Vue.component('com1', { // template: '<h1>com1组件</h1>' // }); new Vue({ el: '#app', }); </script>
第三种:
<div id="app"> <com1></com1> </div> <template id="tpl"> <div><h1>使用template元素创建的组件</h1></div> </template> <script> Vue.component('com1', { template: '#tpl' }); new Vue({ el: '#app', }); </script>
定义私有组件:
<div id="app"> <com2></com2> </div> <script> new Vue({ el: '#app', components: { com2:{ template: '<h2>这是私有组件</h2>' } } }); </script>