第六章组件 62 组件-组件定义方式的复习

最新推荐文章于 2021-12-01 14:50:53 发布

weixin_30319097

最新推荐文章于 2021-12-01 14:50:53 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/songsongblue/p/11001892.html

本文详细介绍了如何在Vue.js中定义并注册全局组件，包括通过对象字面量定义组件模板，使用Vue.component方法注册组件，以及在Vue实例中通过components选项引入组件的过程。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
 8     <title>Document</title>
 9     <!--1.导入Vue的包-->
10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
11   </head>
12 
13   <body>
14       <div id="app">
15       <!-- <mylogin></mylogin> -->
16       <login></login>
17       </div>
18 
19       <script>
20       //定义组件的时候，如果要定义全局的组件，Vue.component('组件的名称',组件的模板对象)
21 
22       //通过对象 字面量的形式，定义了一个组件模板对象
23       var login={
24         template:'<h1>123456</h1>'
25       }
26       //通过 Vue.component 把组件模板对象，注册为一个全局的Vue组件，同时，为了这个组件起了一个名称，可以让我们同标签形式，在页面中直接引入这个组件
27       // Vue.component('mylogin',login)
28 
29 
30           //创建 Vue 实例，得到 ViewModel
31           var vm =  new Vue({
32               el:'#app',
33         data:{
34           msg:''
35         },
36         methods:{},
37         components:{
38           // '组件的名称':组件模板对象
39           // 'mylogin':login
40           login
41         }
42           });
43       </script>
44   </body>
45 </html>