Vue-组件 component

什么是组件：

组件是拥有一定功能许多 html标签 的集合体，是对 html标签 的封装

好处：

模板中为了实现一个(例如)分页效果,需要绘制 20个html标签,如果使用组件，设置 一个标签 就可以，明显提升开发效率

私有组件语法

   声明私有组件

new Vue({
  components:{
    '组件的名称': { 配置对象成员 }, 
    '组件的名称': { 配置对象成员 }...
  },
})

使用组件：
<组件名称></组件名称>

全局组件语法

Vue.component(名称,{配置对象成员})

new Vue()

 

为什么组件的 data 必须是一个 function：

组件根据业务需要，可以被多次使用，function 会使得每次组件使用的时候都亲自执行并给当前应用分配一个独立的数据对象，这样多个组件的data数据是独立的，互相没有关联、牵扯、互相不会覆盖

组件 与 vue实例 异同：

• 组件中的  data 必须是一个 function 并 return 一个字面量对象

（vue实例的 data 可以是字面量 也可以是 function，return形式）

• 组件中直接通过 template属性来指定组件的 html 结构
• 组件和Vue实例拥有类似的成员，都有自己的生命周期函数，过滤器，methods、data等成员