在Vue教程（参考链接：https://cn.vuejs.org/v2/guide/components-registration.html）中提到，全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

完整示例代码（Demo.vue）：

<template>
  <div style="margin-top:100px">
    <component-a></component-a>
    <component-b></component-b>
  </div>
</template>

<script type="text/javascript">
var ComponentA = {
  template: `<el-input placeholder="在这里输入文本"></el-input>`
}
var ComponentB = {
  template: `<el-input placeholder="在这里输入文本"></el-input>`
}

export default {
  name: 'learn',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  },
  data () {
    return {
    }
  }
}
</script>

<style>
</style>

另外一个示例：

<template>
  <div style="margin-top:100px">
    <component-a></component-a>
    <component-b></component-b>
  </div>
</template>
 
<script type="text/javascript">
var ComponentA = {
  data () {
    return {
      input: '',
      select: ''
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    }
  },
  template: `
  <el-input placeholder="请输入内容" v-model="input" style="width: 600px" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
      <el-option label="餐厅名" value="1"></el-option>
      <el-option label="订单号" value="2"></el-option>
      <el-option label="用户电话" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
  `
}
var ComponentB = {
  data () {
    return {
      num: 1
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    }
  },
  template: `
  <el-input-number v-model="num" @change="handleChange" :min=1 :max=10 label="描述文字">
  </el-input-number>
  `
}
 
export default {
  name: 'learn',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  },
  data () {
    return {
      num: 1,
      input: '',
      select: ''
    }
  },
  methods: {
    handleChange (value) {
      alert(value)
    }
  }
}
</script>
 
<style>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>