本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01vue组件注册的步骤-讲解vue组件注册的方式

1.掌握Vue部件。

部件是Vue的另一个关键定义，因为它是一个抽象性，容许大家用小的，单独的和可器重的部件搭建大中型应用软件。

细心想一想，基本上一切种类的运用第三方接口都能够抽象性为部件树:

1.1什么叫部件？

部件是一个单独的指令精彩片段，能够表明网页页面的某些一部分，而且有自已单独的数据信息，JavaScript脚本制作和款式标识。

1.2部件的优点:

提升开发设计高效率便捷多次重复使用有利于协作开发设计更非常容易被管理方法和维护保养

1.3部件建立的基本上流程。

应用Vue.js的部件有三个流程:建立部件构造器，申请注册部件和应用部件。

1.4实例

根据一个事例掌握部件的应用。

应用Vue的部件方式申请注册全局性部件。

// 1. 部件构造器 let MyComponent= Vue.extend({ // 配备目标 // 由于部件沒有挂在点,因此应用模版,只有一个根节点 template: `

小伙伴们好，我的名字叫{{name}}。

点一下换名称 `, data: function(){ return { name:"渣渣辉" } }, methods:{ changeName(){ this.name = "刘德华" } } }) // 2. 根据Component方式,将构造器拓展的构造方法建立部件案例 Vue.component("Greeting",MyComponent) // Vue 案例 const vm = new Vue({ el:"#app-one", })

表明結果:

1.5掌握部件的建立和申请注册。Vue.extend()是Vue构造器拓展，启用Vue.extend()建立的是一个部件构造器，而不是特定的部件案例。Vue.extend()构造器有一个选择项目标，选择项目标的template特性用以界定部件要3D渲染的HTML模版。应用Vue.component()申请注册部件时，必须给予2个主要参数，第1个主要参数时部件的名，第2个主要参数是部件构造器。Vue.component()方式內部会启用部件构造器，建立一个部件案例。部件应当初始化到某一Vue案例下，不然它不容易起效。

1.6 Vue Vue构造方法拓展立即建立Vue案例。

Vue.extend方式等同于拓展了原本的Vue构造方法。实质上，关键是Vue构造方法，因此我们可以根据拓展构造方法立即建立Vue案例。

// 1. 根据部件构造器拓展构造方法 let MyComponent= Vue.extend({ // 配备目标 // 由于部件沒有挂在点,因此应用模版,只有一个根节点 template: `

小伙伴们好，我的名字叫{{name}}。

点一下换名称 `, data: function(){ return { name:"渣渣辉" } }, methods:{ changeName(){ this.name = "刘德华" } } }) // 2. 根据延伸的构造方法建立Vue案例 new MyComponent({ el:'#app' })

实例叙述:

Vue部件实际上也是Vue案例,只不过是沒有挂在点, 根据template解决必须3D渲染的DOM可是部件案例务必有一个名称, 根据这一名称在Vue案例中应用, 根据自定界定标识方法应用部件

在vue中，一个自定义标签vue会把它当做一个部件，vue能够给这种标识授予一定的含意。

1.7立即从选择项目标建立部件。

事实上，Vue的全部部件与此同时全是Vue的案例，因此部件能够接纳同样的选择项目标。因而，大家沒有需要在建立部件的环节中每天都根据构造方法来拓展Vue构造方法。

只需将构造方法的option目标做为第二个参数传递给Vue.component。

事例如下所示:

// 建立部件Vue.component("Greeting",{ template: `

小伙伴们好，我的名字叫{{name}}。

点一下换名称 `, data: function(){ return { name:"渣渣辉" } }, methods:{ changeName(){ this.name = "刘德华" } }})

应用部件

这也是建立部件的强烈推荐方式。

常见问题:

部件名字不可以起和HTML合理合法标识同样 的名称，如p,假如部件名跟HTML合理合法标识同名的, 会默认设置分析为合理合法的标识,因而会将p鉴别为一般的标识,而不是自定义标签,因而就不易被当做部件解决, 与此同时还会继续出错

1.8构件归类。

全局性部件 : 能够申明一次在任何地方应用(一般写软件的情况下全局性应用的多一点)部分部件: 务必告知这一部件归属于谁(一般用部分比较好)

随后使我们好好地掌握一些全局性部件和部分部件的应用。

2.全世界部件。

根据刚刚的事例，坚信大伙儿早已对全局性部件拥有一定的掌握。

当启用Vue.component()申请注册部件时，部件的申请注册是全局性的，这代表着该部件能够在一切Vue实例下应用。

根据实例掌握全局性部件的应用。

2.1建立全局性部件。

全局性部件选用Vue.component方式申请注册，提议应用大骆驼峰来取名部件名字。

// 在js中界定部件名时应用大骆驼峰式取名,// 可是在标识html中里应用时尽可能用连字符-Vue.component('MyCom', { template: ` 这也是全局性部件的內容 `})

2.2建立好几个Vue案例。

// 案例一new Vue({ el:"#app-one",})// 案例二new Vue({ el:"#app-two",})

2.3在好几个Vue案例中应用全局性部件。

2.4常见问题

坚信大伙儿能够见到，大家申请注册部件时采用的部件名是骆驼峰式的撰写方式。这时候，假如在应用部件时不可以在自定义标签中应用hump writing，便会出错，由于HTML无法识别实例，并且它会鉴别出你找不着部件，因此便会在控制面板出错。

可是，在界定部件时，我们可以应用连字符来界定部件名字。

实例编码如下所示:

// 应用连字符界定部件名 Vue.component('my-com', { template: ` 这也是全局性部件的內容 ` }) // Vue创建对象 new Vue({ el:"#app", })

根据事例，我们知道界定部件可以用连字符和骆驼峰来取名，可是在HTML标识中部件的应用务必只写出连字符。

部件名字叙述:

尽管在界定部件时我们可以应用连字符取名,可是不强烈推荐,强烈推荐的应用方法是,界定部件应用驼峰方法, 应用部件应用连字符方式.

对于为何，你再次往下看。

3.当地部件。

有时候我们不期待部件在全部案例中应用，因此我们可以将部件界定为当地部件。

3.1当地部件应用三部曲。

建立部分配备,申请注册部分部件应用部分部件

3.2应用构造方法建立和利用当地部件。

我们可以应用构造方法来建立当地部件，

实例编码如下所示:

// 1. 应用构造器建立部件配备 let MyComponent = Vue.extend({ template: `

我觉得被建立为部分部件

`, }) // 申请注册部分部件的案例 const vm = new Vue({ el:"#app-one", // 2. 申请注册为只有在当今案例中采用的部分部件 components: { "my-component": MyComponent } }) // 沒有申请注册部分部件的案例 new Vue({ el:"#app-two", })

实例叙述:

根据extend方式建立Vue构造器在Vue选择项目标中,根据components选择项将构造器建立为部分部件,components选择项值是一个目标,目标的特性是部件的名字,值是即将被建立为部件的构造器或选择项目标沒有申请注册部分部件的案例目标是不可以应用其他案例中的部分部件,

因而，部件my-component不可以在实例中的app-two中应用，并将汇报不正确。

3.3立即根据选择项目标建立部件。

如前一节上述，我们可以立即将选择项目标申请注册为全局性部件。一样，大家还可以立即将选择项目标申请注册为当地部件，选择项目标将在Vue內部解决。

实例编码如下所示:

// 1. 建立部分部件的选择项目标 let MyComponent = { template: `

我觉得被建立为部分部件

`, } const vm = new Vue({ el:"#app-one", // 2. 将选择项目标申请注册为部分部件 components: { "my-component": MyComponent } })

根据较为，大家会发觉立即将option目标申请注册为当地部件更简易，因此提议应用option目标来建立部件，不论是全局性部件或是当地部件。

这类应用选择项目标立即申请注册为部件的方法称之为部件申请注册语法糖。