全局定义vue组件

时间:2021-09-16
本文章向大家介绍全局定义vue组件,主要包括全局定义vue组件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.什么是组件

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

组件化和模块化的不同:

2.组件化与模块化

 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一

 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用

3.组件定义方式

 

全局定义

  ①使用Vue.extend配合Vue.copmponent方法

    var login = Vue.extend({

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


    ②直接使用Vue.component方法

      Vue.component('register', {

        template: '<h1>注册</h1>'
       });

  ③将模板字符串,定义到script标签

     <script id="tmpl" type="x-template">

    <div><a href="#">登录</a> | <a href="#">注册</a></div>
     </script>

  同时,需要使用 Vue.component 来定义组件:

    Vue.component('account', {

      template: '#tmpl'
      });

 

原文地址:https://www.cnblogs.com/z8g1z7/p/15302489.html