您现在的位置是：首页 > 前端 > 后端 > VUE VUE

uni-app 中的组件

2020-12-09【VUE】2216人已围观

简介## 组件 - 组件的简单使用 - 组件传参 - 组件插槽 ### 组件的简单使用 - 组件的定义 - 组件的引入 - 组件的注册 - 组件的使用 ------------ #### 组件的定义 - 在 `src` 目录下新建文件夹 `components` 用来存放组件 - 在 `components` 目录下新建组件 `*.vue` #### 组件的引入 - 在页面中引入组件 `import 组件名 from '组件路径'`

## 组件

- 1.组件的简单使用
- 2.组件传参
- 3.组件插槽

### 一、组件的简单使用

- 1.1 组件的定义
- 1.2 组件的引入
- 1.3 组件的注册
- 1.4 组件的使用

------------

#### 1.1 组件的定义

- 在 `src` 目录下新建 文件夹 `components` 用来存放组件
- 在 `components` 目录下新建组件 `*.vue`

#### 1.2 组件的引入

- 在页面中引入组件 `import 组件名 from '组件路径'`
- 组件名为 **小驼峰命名**

#### 1.3 组件的注册

- 在页面中的实例中，新增属性 `components`
- 属性 `components` 是一个对象，把组件放进去注册

#### 1.4 组件的使用

- 在页面的标签中，直接使用引入的组件 `<组件></组件>`
- 组件名以 **小驼峰命名** 为佳

> 根目录 `components/box-img.vue`

```html
<template>
	<view class="box_img">
		hello world ！！
	</view>
</template>

> 页面中使用

```
<box-img></box-img>

### 二、组件传参

1. 父向子传递参数 通过 **属性** 的方式
2. 子向父传递参数 通过 **触发事件** 的方式
3. 使用全局数据传递参数
	1. 通过挂载 **vue** 原型
	2. 通过 **globalData** 方式

#### 父向子出来的参数

1. 父页面向子组件 **ul-com** 通过属性名 **list** 传递了一个数组数据
2. 子组件通过 **props** 进行接受数据

```html

<ul-com :list="[1,2,3,4]"></ul-com>

<script>
props: {
	list:Array
},
</script>
```

> 父组件

```html
<template>
	<view class="">
		
		<box-img :src="src1"></box-img>
		<box-img :src="src2"></box-img>
	</view>
</template>

```

> 子组件

```html
<template>
	<view class="box_img">
		<view>
			<image :src="src" mode=""></image>
		</view>
	</view>
</template>

```

#### 子向父出来的参数

1. 子组件通过 **触发事件** 的方式向父组件传递值
2. 父组件通过 **监听事件** 的方式接收数据

```html
<script>
	// 子组件
	methods: {
		handleClick() {
			this.$emit('textChange','来自子组件的数据');
		}
	}
</script>

// 父组件
<ul-com :list="[1,2,3,4]" @textChange="handle"></ul-com>

```

> 子组件

```html
<template>
	<view class="box_img">
		<view>
			<image :src="src" mode="" @click="clickChange"></image>
		</view>
	</view>
</template>

```

> 父组件

```html
<template>
	<view class="">
		
		<box-img :src="src1" @srcChange='handleClickChange'></box-img>
		<box-img :src="src2" @srcChange='handleClickChange'></box-img>
	</view>
</template>

### 全局共享数据

1. 通过 Vue的原型共享数据
2. 通过 **globalData** 共享数据
3. vuex
4. 本地存储

```js
// main.js 中设置  在Vue后设置
Vue.prototype.baseURL = "http://baidu.com";

// App.vue 中设置
globalData：{
	base："http://baidu.com"；
}
// 获取
getApp().globalData.base = "text";
```

### 组件插槽

1. 标签其实也是数据的一种，想实现动态的给子组件传递标签，就可以使用插槽 **slot**
2. 通过 **slot** 来实现占位符

> 子组件

```html
<template>
	<view class="">
		<view>表单数据</view>
		<slot></slot>
	</view>
</template>

> 父组件

```html
<template>
	<view>
		<box-input>
			<radio></radio>
			<checkbox></checkbox>
		</box-input>
	</view>
</template>

```

关注博客，更多精彩分享，敬请期待！