什么是组件：
组件的出现，就是为了拆分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、使用上，三个步骤：
- 引入组件
- 注册局部组件
- 使用
（导入、注册）
父组件把数据传递到子组件，子组件只能拿数据，不能更改数据：
传递数据：
这里通过属性由父组件（父窗体？）传递数据给子组件
ps:这里是“动态传递参数“，即子组件能监控到数据的变化？我曾推想，这里可否静态绑定数据，根据大神同事的说法，如果静态绑定，会把参数当字符串处理，无法绑定变量！
子组件如何接受数据？
（声明 props 接受传递的数据）
从子组件传递数据到父组件：
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
- 使用
$on(eventName)监听事件 - 使用
$emit(eventName)触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
子组件当中，触发一个事情；
父组件中，监听这个事情；数据作为事件的参数？
举个例子：
一个弹出层，用于选择某个银行、单位。
当选择确定按钮的时候，执行相关方法，且fire一个事件。
父组件，可以监听到这个事件。
点击确定按钮的时候，调用这个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:参考文档：
895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
