脚本宝典收集整理的这篇文章主要介绍了Vue.js入门教程-组件注册,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
创建Vue的组件都有三个基本步骤是 【①创建组件构造器、②注册组件和③使用组件】。
比如,我们创建一个Button组件。
// 1. 创建一个组件构造器
let myButton = Vue.extend({
// 模板选项
template: `<button>点击我</button>`
})
// 2. 注册组件,并指定组件的标签,组件的HTML标签为<my-button>
Vue.component('my-button', myButton) // 组件名 构造器
// 创建Vue实例
let app = new Vue({
el: '#app'
})
<!-- 3. #app是Vue实例挂载的元素 -->
<div id="app">
<my-button />
</div>
(1)Vue.extend() 是Vue构造器的扩展,调用 Vue.extend() 创建的是一个组件构造器;
(2)Vue.extend() 构造器有一个选项对象,选项对象的 template 属性用于定义组件要渲染的HTML,简单的理解这个属性用来定义组件的模板(也就是组件的HTML结构);
(3)使用 Vue.component() 注册组件,在注册组件时需要提供两个参数,第一个参数是组件的标签(my-button),第二个参数是组件构造器(myButton);
(4)组件应该挂载到Vue实例,否则不会生效。这一点需要特别的注意。另外同一个组件可以同时挂载到多个Vue实例。
(1)我们使用 Vue.component(tagName, options) 可以注册一个全局的组件,也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。
let myButton = Vue.extend({
template: `<button>点击我</button>`
})
Vue.component('my-button', myButton)
(2)如上写法,我们也可以简写为
Vue.component('my-button', {
template: `<button>点击我</button>`
})
(3)组件注册之后,便可以作为自定义元素 <my-button />,在一个实例的模板中使用。【注意】在初始化根实例之前注册组件。
<div id="app">
<my-button />
</div>
(4)【注意】对于自定义标签的命名,Vue不强制遵循W3C规则(小写,并且包含一个短杠),尽管这被认为是最佳实践。
(1)通过某个Vue实例/组件的实例选项 components 注册,使用该选项注册的组件被称为局部注册。
let myButton = Vue.extend({
template: `<button>点击我</button>`
})
let app = new Vue({
el: '#app',
components: {
'my-button':myButton
}
})
<div id="app">
<my-button />
</div>
(2)得到的效果和注册全局组件是一样的。不同的是,如果你在另一个Vue实例中调用注册的局部组件,该组件不会生效。比如在app2这个实例中调用app中注册的组件my-button,就不会生效。
<div id="app2">
<my-button />
</div>
以上组件注册的方式有些繁锁,Vue为了简化组件注册的过程,提供了注册语法糖。
(1)使用 Vue.component() 直接创建和注册组件。
// 注册全局组件 my-button
Vue.component('my-button', {
template: `<button>点击我</button>`
})
let app = new Vue({
el: '#app'
})
(2)Vue.component() 的第一个参数是组件标签名称,第二个参数是一个选项对象,使用选对象的 template 属性定义组件模板。
(3)使用这种方式,Vue在背后会自动调用 Vue.extend()来创建组件构造器。
(1)在选项对象 components 属性中注册局部组件的语法糖。
let app = new Vue({
el: '#app',
components: {
'my-button': {
template: `<button>点击我</button>`
}
}
})
(2)【注意】尽管注册组件的语法糖简化了组件注册,但在template选项中拼接HTML元素还是相当的麻烦,尽管ES6的语法让事情变得简单了不少,但也将导致HTML和JavaScript的高耦合性。
(3)【其他方式】庆幸的是,Vue除了上面这些语法糖之外,还提供了如下的方式。
Vue.component('my-button', {
template: '#my-button'
})
<template id="my-button">
<button>点击我</button>
</template>
阅读更多
更多系列文章在GitHub的地址 Vue.js入门教程
以上是脚本宝典为你收集整理的Vue.js入门教程-组件注册全部内容,希望文章能够帮你解决Vue.js入门教程-组件注册所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。