uni-app中自定义组件的方法及父子组件间的传值总结

绝地灬酷狼 2023-06-27 08:44 38阅读 0赞

## 自定义组件 ##

自定义组件可以为我们在开发中提供很大的帮助，页面中重复的部分我们便可以通过自定义组件来完成，这样就实现了写一次代码便可以在多个页面同时使用的好处，不仅让其他页面的代码量大大减少了，还可以减轻我们的工作量，提高我们的效率，下面就来说说自定义组件的使用：

*  首先在项目的**components**文件夹下新建一个vue文件，名字随意起就可以，如果没有**components**文件夹可以自己创建一个，在这里再解释一下为什么非得放在**components**文件夹里，因为**components**本身就有部件的意思，当我们使用uni-app的第三方组件时，使用**Hbuilder**时也会默认下载到**components**文件夹下，所以我们的**components**文件夹就是一个专门放组件的文件夹，在我们建好vue文件以后，就可以开始定义我们的组件

<template>
    	<view class="page">
    	<text>{ { child}}</text>
    	<text>{ { title}}</text>
    	</view>
    </template>
    
    <script>
    	export default{ 
    		data:function() { 
    			return{ 
    				child:'这是子组件的值'
    			}
    		},
    		props:['title']
    	}
    </script>
    
    <style>
    	.page{ 
    		width: 100%;
    		height: 200rpx;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		align-items: center;
    		color: white;
    		background-color: #007AFF;
    	}
    </style>

这是子组件的样式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTE1ODYz_size_16_color_FFFFFF_t_70]

*  下面我们在页面中引用自定义的组件，在page目录下新建index.vue文件（在其他的目录叫其他的名字也可以，但必须得是vue文件），引入组件的方法：  
    `import child from '@/components/test.vue'`

引入后要在`components`中注册组件

components: { 
    			child
    		},

之后就可以在页面中使用了：

看一下页面效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTE1ODYz_size_16_color_FFFFFF_t_70 1]  
跟刚刚子组件中定义的是一样的，为了让大家看得更清晰，把页面的所有代码也放上来了

<template>
    	<view class="page">
    		<child></child>
    	</view>
    </template>
    
    <script>
    	import child from '@/components/test/test.vue'
    	
    	export default { 
    		components: { 
    			child
    		},
    		data() { 
    			return { 
    	
    			}
    		},
    		onLoad() { 
    
    		},
    		methods: { 
    		
    		}	
    	}
    </script>
    
    <style>
    	
    </style>

## 父子组件的传值 ##

### 父组件传值给子组件 ###

刚刚在定义子组件的之后写了一条props的语句：  
![在这里插入图片描述][20200105170259734.png]  
没错，就是通过props来完成父组件向子组件传值的，子组件中写在props中的变量是不会在子组件中显示的，只能通过父组件将数值传个在props中定义的变量，事实上，子组件中props定义的变量，在父组件中使用的时候就成了子组件的属性名，我们通过给属性名赋值就完成了给子组件传值了，下面来看一下是怎么使用的：

在看一下效果：  
![在这里插入图片描述][20200105171107777.png]  
这样就完成了父组件传值给子组件了。

### 子组件传值给父组件 ###

子组件传值给父组件是通过在子组件中使用$emit（eventName，optionalPayload）来触发事件，eventName为在父组件中触发的事件名，optionalPayload为所要传的变量名，在父组件中使用v-on来监听子组件触发的事件，下面介绍一下如何使用：  
在子组件中增加触发事件：

<template>
    	<view class="page">
    	<text @click="onChild">{ { child}}</text>
    	<text>{ { title}}</text>
    	</view>
    </template>

**在script标签下写触发后的方法：**

methods:{ 
    			onChild:function(){ 
    				console.log('触发了子组件事件')
    				this.$emit('onFather',this.child)
    			}
    		}

**在父组件中使用：**

methods: { 
    		click:function(e){ 
    			console.log(e)
    		}
    }

写好后，点击“这是子组件的值”这句话就可以在控制台查看打印结果了：  
![在这里插入图片描述][2020010517263714.png]  
这就说明我们已经成功将子组件的值传给父组件了。

## 总结 ##

我所说的这些也只是自定义组件的最基础用法，在我们的实际项目中还会定义更多更复杂的组件，也希望大家通过这些自定义组件为自己的项目提供大大的帮助，另外，本人也是个小白，如果在文中有写错的地方欢迎指出。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTE1ODYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200105164924773.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTE1ODYz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTE1ODYz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200105165834479.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTE1ODYz,size_16,color_FFFFFF,t_70
[20200105170259734.png]: https://img-blog.csdnimg.cn/20200105170259734.png
[20200105171107777.png]: https://img-blog.csdnimg.cn/20200105171107777.png
[2020010517263714.png]: https://img-blog.csdnimg.cn/2020010517263714.png