Vue 创建组件的方式

2018年08月07日 11:10:56 阅读数：1015

 

版权声明：本文为博主原创文章，未经博主允许不得用做其他商业活动。 https://blog.csdn.net/weixin_42218847/article/details/81477836

方式一

          var tem1 = Vue.extend({      template:'
这是使用 Vue.extend 创建的组件
' //指定组件要展示的HTML结构 }); 
      Vue.component('myTem1',tem1); /* 
      使用 Vue.component() 定义全局组件的时候， 组件名称使用 驼峰命名，则在引用组件的时候，需要把大写改为小写，并且用 '-'将单词连接 组件名称不使用驼峰命名，则直接拿名称来使用即可 */ 
      Vue.component('myTem1',Vue.extend({ template : '
这是使用 Vue.extend 创建的组件
' })) 
     
 
       
       
       
     

方式二

直接使用Vue.component()

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

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

       
这是使用 Vue.component 创建的组件
 123

这个问题是在 组件template属性指向的模板内容，必须有且只能有唯一的一个根元素

所以修改代码如下：

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

运行结果如下：

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

方式三

          Vue.component('mycom3',{            template : '#tem1'     }); 
         
     
 
       
       
     
 
     

运行结果如下：

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

Vue 创建组件的方式

[Vue chuàngjiàn zǔjiàn de fāngshì]

How Vue creates components