Vue从甜小白到皮大佬系列(五) 组件

阅读时间预估: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了,确实是这样的,那么大侠,你可否在仔细深刻的研究下,脚手架是如何把各个组件关联起来的呢?先留个悬念,后面会告诉你答案.

若是个人分享对面前的这位大侠有所启发,请不要吝啬手中大拇指,以程序员最高礼遇点赞✨ 评论加分享的方式鼓励我持续分享,也欢迎各位大佬勘误,提出宝贵意见.

关注公众号回复:学习 领取前端最新最全学习资料,也能够进群和大佬一块儿学习交流

猛戳 个人前端进阶Blog