<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <mycom3></mycom3> <!-- <login></login> --> </div> <div id="app2"> <mycom3></mycom3> <login></login> </div> <!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构 --> <template id="tmpl"> <div> <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1> <h4>好用,不错!</h4> </div> </template> <template id="tmpl2"> <h1>这是私有的 login 组件</h1> </template> <script> Vue.component('mycom3', { template: '#tmpl' }) // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {} }); var vm2 = new Vue({ el: '#app2', data: {}, methods: {}, filters: {}, directives: {}, components: { // 定义实例内部私有组件的 login: { template: '#tmpl2' } }, beforeCreate() { }, created() { }, beforeMount() { }, mounted() { }, beforeUpdate() { }, updated() { }, beforeDestroy() { }, destroyed() { } }) </script> </body> </html>