阅读时间预估:2分钟
啥是组件?
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树,举个栗子,就像小时候玩的积木一样,想要一个好玩的玩具那么就动手一个组件一个组件的拼接吧.
- 创建组件的两种方式:1.全局组件 2.局部组件
全局组件
- 说明：全局组件在所有的vue实例中都可以使用
- 注意：先注册组件，再初始化根实例
// 1 注册全局组件
Vue.component('my-component', {
// template 只能有一个根元素
template: '<p>A custom component!</p>',
// 组件中的 `data` 必须是函数 并且函数的返回值必须是对象
data() {
return {
msg: '注意：组件的data必须是一个函数！！！'
}
}
})
// 2 使用：以自定义元素的方式
<div id="example">
<my-component></my-component>
</div>
// =====> 渲染结果
<div id="example">
<p>A custom component!</p>
</div>
// 3 template属性的值可以是：
- 1 模板字符串
- 2 模板id template: '#tpl'
<script type="text/x-template" id="tpl">
<p>A custom component!</p>
</script>
- extend：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
var Home = Vue.extend({
template: '',
data() {}
})
Vue.component('home', Home)
局部组件
- 说明：局部组件，是在某一个具体的vue实例中定义的，只能在这个vue实例中使用
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// 注意：此处为 components
components: {
// <my-component> 将只在当前vue实例中使用
// my-component 为组件名 值为配置对象
'my-component': {
template: ``,
data () { return { } },
props : []
}
}
})
最后
看完上面的代码,对于善于利用脚手架开发的小伙伴来说是不是有一丝丝清凉,平时创建组件可不是这么写的,对于使用脚手架开发来说组件就是一个个Vue的实例,创建一个.vue文件,在需要用到的地方直接引用就OK了,确实是这样的,那么大侠,你能否在仔细深入的研究下,脚手架是如何把各个组件关联起来的呢?先留个悬念,后面会告诉你答案.
如果我的分享对面前的这位大侠有所启发,请不要吝啬手中大拇指,以程序员最高礼遇点赞✨ 评论加分享的方式鼓励我持续分享,也欢迎各位大佬勘误,提出宝贵意见.
关注公众号回复:学习 领取前端最新最全学习资料,也可以进群和大佬一起学习交流
