## 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) |
|