## 1. Vue组件的作用：
把前端功能代码进行封装，在使用的时候直接调用
element网站有很多现成的组件可以自行拷贝。
## 2. Vue组件的定义和使用
### 2.1全局组件
定义：
Vue.component(
"组件名"，
{
template:".......(具体的html标签)"
}
)
调用：
把组件名作为标签进行调用
### 2.2局部组件
定义：
var zujian_a={
template:'.....().......(具体的html标签)'
}
并且在全局组件中(与template在同一层级)增加：
components:{
zujian_a
}
调用：
在全局组件定义时，调用局部组件（也是当做html标签使用）
### 2.3 在组件中传参
在方法中指定返回值。
在组件中进行定义：
data:function(){
return{
age:18
}
}
### 2.4父组件往子组件传参
在子组件增加:
props:['pos']，用来接收父组件的值
在全局组件中调用局部组件时 绑定属性:pos='age'
### 2.5子组件往父组件传参
在子组件中指定按钮触发方法，
定义方法传递数据
methods:{
child:function(){
return this.$emit('upload',this.name)
}}
$emit表示往父组件传承
在父组件调用子组件时，绑定方法触发接收数据的方法，并且在父组件定义时，定义接收方法
### 2.6单文件组件（以.vue作为文件后缀）
按操作一步一步来...
### 2.7嵌套形式对多个单文件组件的使用
在组件App.vue中使用导入并且使用其他单文件组件
### 2.8路由对多个单文件组件的使用
创建路由js
修改main.js
修改在app.vue 中使用 router-view 标签
### 2.9 element -ui的使用
导入element-ui
导入element-ui 下的index.css
Vue.use(Element) |
|
收藏
淘帖
踩
