Vue - 组件(Component)
2022-02-25 本文已影响0人
秀萝卜
https://www.jianshu.com/p/f5eb996f5e2a
一、什么是组件(Component)?
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可以重用的代码。在较高层面上,组件是自定义元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用is
特性进行了扩展的原生HTML元素。
所有Vue组件同事也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项)并且提供相同的生命周期钩子。
二、使用组件
1.全局组件
我们知道,创建一个Vue实例可以:
new Vue({
el: '#some-element',
// 选项
})
全局注册组件,可以使用Vue.component(tagName, options)
。 比如:
Vue.component('my-component', {
// 选项
})
请注意,对于自定义标签的命名 Vue.js 不强制遵循 W3C 规则 (小写,并且包含一个短杠),尽管这被认为是最佳实践。
组件在注册之后,便可以作为自定义元素:<my-component></my-component>
使用了。
注意确保在初始化根实例之前注册组件:
在初始化根实例之前注册组件
这句话就是指的是:
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
var vm = new Vue({
el: '#box'
})
这样的顺序是对的,而
var vm = new Vue({
el: '#box'
})
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
这样是错的。
<div id="example">
<my-component></my-component>
</div>
// 注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
el: '#example'
})
我们要注意,一般选项中需要添加template
,就是HTML的构造。
渲染为:
<div id="example">
<div>A custom component!</div>
</div>
作者:廖马儿
链接:https://www.jianshu.com/p/f5eb996f5e2a
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。