1，定义公有组件
<body> <div id="app">
<!--步骤3：引入组件--> <mycom3></mycom3> </div> <!--步骤2：在被控制的#app外面 使用template元素，定义组件的HTML模板结构--> <template id="tmp1"> <div> <h1>你好3 在外部定义组件的结构</h1> </div> </template> <script> //步骤1：组件创建的方式三 Vue.component(‘mycom3‘, { template: ‘#tmp1‘ }) var vm = new Vue({ el: ‘#app‘, data: {}, methods: {}, filters: {}, directives: {}, created(){}, mounted(){} }) </script> </body>
2，定义私有组件
<body> <div id="app">
<!--步骤3：引入组件--> <mycom3></mycom3> </div> <!--步骤2：在被控制的#app外面 使用template元素，定义组件的HTML模板结构--> <template id="tmp2"> <div> <h1>你好3 在外部定义组件的结构</h1> </div> </template> <script> var vm = new Vue({ el: ‘#app‘, data: {}, methods: {}, filters: {}, directives: {}, //步骤1：定义实例内部私有组件，mycom3表示组件名称 components: { mycom3: { template: ‘#tmp2‘ } }, created(){}, mounted(){} }) </script> </body>
原文：https://www.cnblogs.com/ella-li/p/14643094.html