VUE,创建组件的方式

2018-8-9    seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

方式一 

 <!--1.1使用Vue.extend来创建全局的Vue组件--> var tem1 = Vue.extend({
      template:'<h3>这是使用 Vue.extend 创建的组件</h3>' //指定组件要展示的HTML结构
    }); <!--1.2使用Vue.component('组件名称',创建出来的组件模板对象)--> Vue.component('myTem1',tem1);

    /* <!--注意--> 使用 Vue.component() 定义全局组件的时候，
        组件名称使用 驼峰命名，则在引用组件的时候，需要把大写改为小写，并且用 '-'将单词连接
        组件名称不适用驼峰命名，则直接拿名称来使用即可
     */ <!--组合方式--> Vue.component('myTem1',Vue.extend({
        template : '<h3>这是使用 Vue.extend 创建的组件</h3>'
    })) <div id="app"> <!-- 如果要使用组件，直接把组件的名称以 HTML 标签的形式，引入到页面中--> <my-tem1> </my-tem1> </div> 
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    •

方式二

直接使用Vue.component() 

 Vue.component('mycom2',{
        template : '<h3>这是使用 Vue.component 创建的组件</h3>' }) 
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

但是这样写会有一个问题： 

<!--在h3标签后紧接一个span标签的话就会出问题了--> <h3>这是使用 Vue.component 创建的组件</h3> <span>123</span> 
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    •


这个问题是在 组件template属性指向的模板内容，必须有且只能有唯一的一个根元素 
所以修改代码如下： 

Vue.component('mycom2',{
        template : 
            '<div> <h3>这是使用 Vue.component 创建的组件</h3> <span>123</span> </div>'
}) 
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    •

运行结果如下：

这里写图片描述

不过这种方式也有一个瑕疵，就是template 属性的值是HTML标签，而在软件中，并没有智能提示，容易出错，若使用这种方式，需要仔细，避免出错

方式三 

<!--1.定义组件：--> Vue.component('mycom3',{
            template : '#tem1'
     }); <!--2.在被控制的 #app 外面使用 template 元素，定义组建的HTML模板结构--> <div id="app"> <!--3. 引用组件 --> <mycom3></mycom3> </div> <template id="tem1"> <div> <h1>这是 template 元素</h1> <span>这种方式好用</span> </div> </template>  
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    •

运行结果如下：

这里写图片描述

这是Vue创建组件(全局)的3种方式，其实相差不多，希望对大家有所帮助


分享本文至：
« 黄金圈法则：怎样识别真需求和伪需求？ 网页设计中的布局 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档