vue组件化

vue的核心组件化以及双向绑定，这里主要聊下vue的组件化，聊得过程也主要是从业务场景入手。大家日常用的比较多的，就多介绍下，不怎么用，或者本人暂未发现特别用处的就少介绍些。

组件是vue的一等公民，是复用的常用手段。在vue中，初始化组件的方式很多，简单说下几种个人用的比较多的。

1. 单文件组件
2. template中写组件
3. 实例化vue写组件

脱离了应用场景讲技术都是耍流氓，接下来会详细介绍每一种的使用方式，背后以及业务场景。

• 单文件组件

  使用方式：

  <template>
  <template>
  <script>
    import Hello from './hello.vue'
    component:{Hello}
   </script>
  
  

  引申：

  import 到底导入的是什么？为啥非得在component中注册下？导入的是什么?导出的是啥？ 我们来到vue文件中看到 export default ｛data：'', created(){}｝，那是不是意味着，导入的就是这个东西？ 是么？

  如果是，那这边没有template，为什么导入之后就存在那些要素

  如果不是，那为啥我都没导出，你如何导入的？

  话不多少，打印一下

  搜嘎，原来是这个 东西，为啥？

  不卖关子，这里是webpack中 vue-loader，帮帮我们将vue文件转成js，这个过程 vue-template-compiler会将template转成render函数。所以可以这么说，可以自己写一个export default｛｝，在里边实现了render方法，一样可以渲染出来。

  export default { render(){return <div>RENDER</div>}}

  那如果没有vue-template-compiler呢？

  那首先，我们肯定不能使用.vue文件这种类型的单文件组件里。

  那其他方面呢？我们可以去掉脚手架中的vue文件，然后都是使用render的方式看，发现也是可以的。当然，这样用起来会更加复杂和难用，有使用场景么？

  业务场景：

  ​ 使用场景主要是可以分布部署组件，举个例子：可以写一个组件然后打包部署，具体来说就是一个门户网站，可以引入多个地方的js，然后下载下来打包后的js，可以在门户上渲染出来。

  这种使用场景存在一些问题：

  1. 首先是接口调用，因为每个js代表不同的业务部门，接口调用问题可以通过配置nginx的方式。具体来说是这样，组件内部接受一个data数据，这个data数据在开发过程中，主要还是mock的作用，然后通过props的方式接受参数，页面可以定义数据获取方式，所有数据获取都使用nginx做代理的方式（数灯）
  2. 方法调用，各个组件组件可能存在数据交互，这种东西主要通过事件总线的方式，类似的实现方式是eventBus，实现事件订阅和时间分发的方法

• 实例化vue写组件

  使用方式

  const vm = new Vue({
      render(){
          return <div>Hello</div>
      }
  }).$mount()
  
  //vm是啥？？？
  document.body.appendChild(vm.$el);
  const comp = vm.$children[0];
  

  引申

  业务场景

  这个的业务场景主要是在封装组件的时候，比如element的message方法等，这些组件都是在js中调用，没引类似vue的