什么是组件：

组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块

，将来我们需要什么功能，就可以去调用对应的组件即可　

组件化与模块化的不同：

　　　　模块化：是从代码逻辑的角度进行分析，方便代码分层开发，保证每个功能模块的只能单一　　

　　　　组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用。

组件创建的三种方式：

main.js当中：

// Component 组件的创建
        // 注意  template 中的容器 只能有一个父元素，不能包含两个 你可以用一个div包裹
        // 第一种创建全局组件
        // extend是注册组件函数，他返回一个对象
  var comobj= Vue.extend({
          template:"<h1>我是第一种v创建出来的组件</h1>"
      })
      // component函数提交组件，第一个参数为组件的名称，第二个参数是一个注册组件的对象
      Vue.component("login",comobj)   

Vue.component('login2',{template:'<h1>我是第二种v创建出来的组件</h1>'});

// 第三种创建的方式 首先在元素中创建一个template模板
Vue.component('login3',{template:'#login3'})

login3我们定义在index.html当中： 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test1</title>
  </head>
  <body>
    <div id="app"></div>

  <!-- 注意 这里的id是必须的，不要在实例控制中的divcalss app 中去写template -->
  <template id="login3">
      <div>
          <h2>我是第三种方式创建出来的</h2>
      </div>
</template>

    <script src="/dist/build.js"></script>
  </body>
</html>

A、 组件和页面结构是类似的

B、使用上，三个步骤：

  1. 引入组件
  2. 注册局部组件
  3. 使用

element 组合式statistic 组件element_ui

（导入、注册）

父组件把数据传递到子组件，子组件只能拿数据，不能更改数据：

传递数据：

element 组合式statistic 组件element_ui_02

这里通过属性由父组件（父窗体？）传递数据给子组件

ps:这里是“动态传递参数“，即子组件能监控到数据的变化？我曾推想，这里可否静态绑定数据，根据大神同事的说法，如果静态绑定，会把参数当字符串处理，无法绑定变量！

子组件如何接受数据？

element 组合式statistic 组件element_学习_03

（声明 props 接受传递的数据）

从子组件传递数据到父组件：

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

  • 使用 $on(eventName) 监听事件
  • 使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

子组件当中，触发一个事情；

父组件中，监听这个事情；数据作为事件的参数？

举个例子：

一个弹出层，用于选择某个银行、单位。

当选择确定按钮的时候，执行相关方法，且fire一个事件。

父组件，可以监听到这个事件。

element 组合式statistic 组件element_学习_04

点击确定按钮的时候，调用这个confirm方法。

这个组件实例中，监听这个select 事件，获取相关选择数据。

......  //监听select事件，事件发生的时候，调用getselect方法
  <layer ref="layer" :tb-head="tbHead" :form="formBasagency" :table-data="BasagencyList" title="选择所属项目" @select="getSelect"/>
.....

  // 申请单位
    getSelect(val) {
      console.log(val)
      this.currentRow.agencyname = val.currentRow.agencyname
      this.currentRow.agencyid = val.currentRow.guid
      if (this.currentRow.agencyid && this.currentRow.typename) {
        this.findChargeProjectOrChargeTypeOrBudgetSubjec()
      }
    },

ps:参考文档：

Vue.js 组件