uni-app组件的使用及父子组件传值

待我称王封你为后i 2023-07-13 16:27 531阅读 0赞

uni-app搭建了组件的插件市场，可大幅提升开发者的效率。[https://ext.dcloud.net.cn/][https_ext.dcloud.net.cn]

# 组件的使用 #

**在项目的/component目录下存放组件，在要显示组件的页面中则分为3步：导入、注册和使用。**

<template>
    	<view class="content">
    	<test></test>//三、使用组件（也可以写为</test>）
    	</view>
    </template>
    <script>
    	import test from "../../components/test.vue"//二、导入组件
    	export default {
    		data() {
    			return { 
    			}
    		},
    		components:{	//一、局部注册组件
    			test
    		}
    	}
    </script>
    <style>
    </style>

uni-app只支持（.vue 组件）。其他的诸如：动态组件，自定义 `render`，和`<script type="text/x-template">` 字符串模版等，在非H5端不支持。

## easycom【组件自动引入规则】（HBuilderX 2.5.5起支持easycom组件模式。） ##

1、传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的**components**目录下，并符合**components/组件名称/组件名称.vue目录结构**。就可以不用引用、注册，直接在页面中使用。  
2、可在（[插件市场][Link 1]）下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。  
3、easycom是自动开启的，不需要手动开启，有需求时可以在pages.json的easycom节点进行个性化设置，  
例：

<template>
        <view class="container">
            <uni-list>
                <uni-list-item title="第一行"></uni-list-item>
                <uni-list-item title="第二行"></uni-list-item>
            </uni-list>
        </view>
    </template>
    <script>
        // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
        export default {
            data() {
                return {
                }
            }
        }
    </script>

效果：（该组件的下载地址：[https://ext.dcloud.net.cn/plugin?id=24][https_ext.dcloud.net.cn_plugin_id_24]）  
![在这里插入图片描述][20200313142810254.png]  
**自定义easycom配置的示例：**

"easycom": {
      "autoscan": true,//autoscan是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
      "custom": {
      }
    }

注意：

*  easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用
 *  easycom方式引入组件不是全局引入，而是局部引入。
 *  在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）
 *  考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。
 *  easycom只处理vue组件，不处理小程序组件。暂不处理后缀为.nvue的组件
 *  nvue页面里的.vue后缀的组件，同样支持easycom

## uni-app内置基础组件 ##

uni-app 内置了小程序的所有[组件][Link 2]  
注意：原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 `bindchange="eventName"` 事件，需要写成 `@change="eventName"`

## 全局组件（nvue页面暂不支持全局组件） ##

uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。  
例：  
main.js 里进行全局导入和注册

import uniList from './components/uni-list/uni-list.vue'
    Vue.component('uni-list',uniList)//Vue.component 的第一个参数必须是静态的字符串

其他vue文件里可直接使用组件

[点击查看不能作为组件名的字符串][Link 3]

# 父子组件传值 #

### 子类接收父类的数据,就会用到props ###

在子类props里定义接收参数:

**父组件：**

<template>
    	<view class="phone">
    		<test :backGround="noticesList"></test>//传给子
    	</view>
    </template>
    <script>
    import test from '../../components/test.vue'
    export default {
    	components:{
    		test
    	},
    	data(){
    		return{
    			noticesList: "#000"   //传递的参数
    		}
    	}	
    }
    </script>

**子组件**

<template>
    	<view>
    		<view class="con" :style="[{background:backGround}]"></view>
    	</view>
    </template>
    <script>
    export default {
      //子类的props定义接收参数
    	props:{
    		 backGround:{            //参数名
    			 type:String,      //定义传值的类型
    			 default:'#f00'    //参数默认
    		 }
    	 }
    }
    </script>
    <style>
    .con{
    		width: 200rpx;
    		height: 200rpx;
    	}
    </style>

实现效果：  
![在这里插入图片描述][20200313173701325.png]  
在子类props里定义接收参数：  
![在这里插入图片描述][20200313173801480.png]  
在子类标签写上引用：  
![在这里插入图片描述][20200313173839542.png]  
然后在父类写上准备传递的参数：  
![在这里插入图片描述][20200313175106323.png]  
这样 子组件拿到父组件的背景颜色值,就会去覆盖默认的背景颜色

## 子组件给父组件传值（$emit） ##

父组件：

<template>
    	<view class="phone">
    		
    		<test  @returnDat='returnDate'></test>
    	</view>
    </template>
    
    <script>
    import test from '../../components/test.vue'
    export default {
    	components:{
    		test
    	},
    	methods:{ //定义接收方法
    		returnDate(val){
    			console.log("接收的值："+val)
    		}
    	}
    }
    </script>

子组件：

<template>
    	<view>
    	
    		<button type="primary" @click="getValue">点击传值</button>
    	</view>
    </template>
    
    <script>
    export default {
    	//需要首先在子类组件定义事件
    	methods:{
    		getValue(){      
    			this.$emit("returnDat","liyan")//传递的值
    			 //returnDate接收的方法名  
    		}  
    	}
    }
    </script>

1、需要在子类组件定义事件  
![在这里插入图片描述][2020031318134194.png]  
2、在子类写上触发事件  
![在这里插入图片描述][20200313181500875.png]  
3、在父类引用标签上写上在子类`$emit`里面定义的方法名,以及接收方法![在这里插入图片描述][20200313181629981.png]  
然后点击子类触发,就可以传值给父类：（可多次）  
![在这里插入图片描述][20200313182105235.png]

[https_ext.dcloud.net.cn]: https://ext.dcloud.net.cn/
[Link 1]: https://ext.dcloud.net.cn
[https_ext.dcloud.net.cn_plugin_id_24]: https://ext.dcloud.net.cn/plugin?id=24
[20200313142810254.png]: /images/20230529/b5d2052c8fce472282a031db0586f795.png
[Link 2]: https://uniapp.dcloud.io/component/
[Link 3]: https://uniapp.dcloud.io/use?id=%E5%91%BD%E5%90%8D%E9%99%90%E5%88%B6
[20200313173701325.png]: /images/20230529/bef8b06a92da426eb4e52df99e0d8b38.png
[20200313173801480.png]: /images/20230529/51f0bfc51a044cd2bbc17aa1a79cadd4.png
[20200313173839542.png]: /images/20230529/ad80fb415e054197a1fff211e9dafbb5.png
[20200313175106323.png]: /images/20230529/c91ebb2cd0ca443797e0a9915acd7448.png
[2020031318134194.png]: /images/20230529/6efe11f63b86446db5460203a9d53a75.png
[20200313181500875.png]: /images/20230529/deacb529a65f4714a0b2c8235864445f.png
[20200313181629981.png]: /images/20230529/42d934da16144b95baf56817dfbb8973.png
[20200313182105235.png]: /images/20230529/1af1b0cc65e24b8e99bb8456caa8ec84.png