VUE学习07：vue组件的创建、注册和使用全教程

来源：齐鲁建站栏目：开发教程阅读：日期：2021-12-20

本文介绍了VUE学习07：vue组件的创建、注册和使用全教程，分为三个步骤进行介绍，分别为第一步、创建组件，使用Vue.extend语句，第二步、注册组件，使用components，以及第三步、使用组件，非常简单，在里面放上“ ”就可以了。

VUE中使用组件要分三步走，下面就来说说这三步怎么操作吧。

第一步、创建组件，使用Vue.extend语句，格式如下：

const 变量名 = Vue.extend({
   语句基本格式如下：
   template:`
       HTML布局项
   `,
   data(){
       return{
           name:'值',
       }
   }

   注意：
   1、此处不要写“ el:'' ”项
   2、data使用函数输出的形式
})

第二步、注册组件，使用components，格式如下：

new Vue({
   el: '#main',
   //局部注册组件
   components:{
       组件名:变量名 //第一步中创建的“变量名”，若组件名和变量名使用相同的名称，可以简写为组件名
   }
})

补充：全局注册组件
Vue.component('组件名',组件)

第三步、使用组件，非常简单，在<body>里面放上“ <组件名></组件名> ”就可以了

TAG： VUE VUE组件