Vue，组件-组件的创建方式3(添加私有组件)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="../js/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <mycom3></mycom3> 13 </div> 14 15 <div id="app1"> 16 <mycom3></mycom3> 17 <login></login> 18 </div> 19 20 <!-- 在 被控制的 #app 外面， 使用 template 元素， 定义组件的HTML模板结构 --> 21 <template id="tmpl"> 22 <div> 23 <h1>这是通过 template 元素， 在外部定义的组件结构， 这个方式， 有代码的智能提示和高亮</h1> 24 <h4>好用，不错！</h4> 25 </div> 26 </template> 27 28 <template id="tmpl2"> 29 <div> 30 <h1> 这是私有的 login 组件 </h1> 31 </div> 32 </template> 33 </body> 34 </html> 35 <script> 36 37 Vue.component('mycom3', { 38 template: '#tmpl' 39 }) 40 41 var vm = new Vue({ 42 el: '#app', 43 data:{}, 44 method:{} 45 }) 46 47 var vm2 = new Vue({ 48 el:'#app1', 49 data:{}, 50 methods: {}, 51 filters: {}, 52 directives: {}, 53 components: { // 定义实例内部私有组件的 54 login:{ 55 // template: '<h1> 这是私有的 login组件 </h1>' 56 template: '#tmpl2' 57 } 58 }, 59 60 beforeCreate() {}, 61 created() {}, 62 beforeMount() {}, 63 mounted() {}, 64 beforeUpdate() {}, 65 updated() {}, 66 beforeDestroy() {}, 67 destroyed () {} 68 69 }) 70 </script>
效果图
