2019-04-08 组件

组件

组件注册

需要组件配置对象（就是一个普通对象）

组件配置对象

  const 对象名(组件名) = {
    // template中有且只能有一个根节点
    template: `
      

    `,
    // 函数返回值的形式
    data () {
      return {
        // 组件中的data默认只能被当前组件获取
        msg: ""
      }
    }
  }

全局注册

在所有的组件中都可以直接使用

Vue.component('组件名', 组件配置对象)

const com1 = {
  name: 'com1'
}
const com2 = {
  name: 'com2'
}
const com3 = {
  name: 'com3'
}

const com4 = {
  name: 'com4'
}

const components = [com1, com2, com3, com4]

components.forEach(component => Vue.component(component.name, component))

局部注册

const BedRoom = {
  template: `
    
卧室
  `
}

const House = {
  template: `
    

      
    
  `,
  components: {
    // 组件名: 组件配置对象
    BedRoom: BedRoom
  }
}