Vue.js 创建Vue组件的方式

àì夳堔傛蜴生んèń 2022-03-17 12:58 222阅读 0赞

### 文章目录 ###

*   *  定义Vue组件
     *   *  全局组件定义的三种方式
         *  使用\`components\`属性定义局部子组件

## 定义Vue组件 ##

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；  
组件化和模块化的不同：

*  模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
 *  组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

### 全局组件定义的三种方式 ###

1.  使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
          template: '<h1>登录</h1>'
        });
        Vue.component('login', login);

<!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">
        
        <mycom1></mycom1>
      </div>
    
      <script>
        // 1.1 使用 Vue.extend 来创建全局的Vue组件
        // var com1 = Vue.extend({
        //   template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构
        // })
        // 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)
        // Vue.component('myCom1', com1)
        // 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接；
        // 如果不使用驼峰,则直接拿名称来使用即可;
        // Vue.component('mycom1', com1)
    
        // Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个 标签形式 来引入 它的
        // 第二个参数: Vue.extend 创建的组件  ,其中 template 就是组件将来要展示的HTML内容
        Vue.component('mycom1', Vue.extend({
          template: '<h3>这是使用 Vue.extend 创建的组件</h3>'
        }))
    
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {}
        });
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]

1.  直接使用 Vue.component 方法：

Vue.component('register', {
          template: '<h1>注册</h1>'
        });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]

1.  将模板字符串，定义到script标签种：

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {
          template: '#tmpl'
        });

> 注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 2]

### 使用`components`属性定义局部子组件 ###

1.  组件实例定义方式：

1.  引用组件：

<!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>
        
      </div>
    
    
      <div id="app2">
        <mycom3></mycom3>
        <login></login>
      </div>
    
      
      <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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]: /images/20220317/3aa4f3f26fdf44338fa6a80973dfe3f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]: /images/20220317/9f346fd7a4f14fa7b7baac3eb363ec0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 2]: /images/20220317/48594d9fdec54999a9148f6cd3ccdcb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 3]: /images/20220317/bd6522272d784e539c17153ad5493710.png