A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© hzhjhh 初级黑马   /  2019-6-21 08:59  /  1057 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马