uni-app父子组件传递数据

新建项目

新建组件

<template>
	<view>
		edit
	</view>
</template>

<script>
	export default {
		
	}
</script>

<style scoped lang="less">

</style>

组件里面没啥内容，就一个纯粹的模板。

在index.vue中引入并注册组件，

<script>
	import user-info-edit from '../../components/user-info/user-info-edit';
	import user-info-show from '../../components/user-info/user-info-show';
	
	export default {
		
		components:{
			user-info-edit,user-info-show
		}
	}
</script>

在代码中使用组件，如下

<template>
	<view>
		<user-info-edit></user-info-edit>
		<user-info-show></user-info-show>
	</view>
</template>

OK ,现在启动，运行到浏览器。

会发现报如下的语法错误，而（9：11）就是import 这个单词后面，其实是无法使用 “-” 横线作为连接符。

将注册的组件修改为如下名字就可，驼峰的写法，在vue的界面中就可以使用 这种标签。

import userInfoEdit from '../../components/user-info/user-info-edit';
import userInfoShow from '../../components/user-info/user-info-show';
	
	export default {
		
		components:{
			userInfoEdit,userInfoShow
		}
	}

OK，组件显示成功。

传递数据给子组件

​ 传递数据给子组件，只需要在子组件中增加属性即可。

在 user-info-show.vue中增加属性，定义一个userInfos的数组，用来展示数据。

export default {
		props:{
			userInfos:Array
		}
	}

在子组件页面中就可以使用一个ulist来循环展示，如下

<!--用户信息列表-->
		<uni-list>
			<uni-list-item v-for="(userInfo,index) in userInfos" :key="index">
				<view slot="body">
					<uni-row>
						<uni-col :span="12">
							<text>姓名：</text>
						</uni-col>
						<uni-col :span="12">
							<text>{{userInfo.emp_name}}</text>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="12">
							<text>工号：</text>
						</uni-col>
						<uni-col :span="12">
							<text>{{userInfo.emp_code}}</text>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="12">
							<text>工牌：</text>
						</uni-col>
						<uni-col :span="12">
							<text>{{userInfo.emp_badge_mac}}</text>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="12">
							<text>绑定状态：</text>
						</uni-col>
						<uni-col :span="12">
							<text>{{userInfo.bind_status_name}}</text>
						</uni-col>
					</uni-row>
				</view>
			</uni-list-item>
		</uni-list>

在父组件中使用子组件时传递数据，调用 userInfos属性，如下所示，这个属性是 组件中定义的，等号后面的是父组件中 data的数据。

<user-info-show :userInfos="userInfos"></user-info-show>

最后页面就展示了，

传递数据给父组件

如下图所示，用不同颜色标出了对应的关系，父组件注册监听，并给子组件一个回调函数，子组件触发监听，系统自动将数据传递给对调函数。

获取子组件中数据，然后由父组件来操作，比如子组件展示了数据后需要弹框让用户修改用户数据。

​ 子组件发送数据主要是靠 $emit(eventName,param) 这个方法，如下图是官网对这个方法的解释。

也就是说，父组件要传递给监听器一个回调函数，这个函数就用来接收子组件参数。

此时在index.vue（父组件）也就是中methods处定义一个方法，也就是回调函数，如下所示

childData(param){
	console.log(param)
},

在子组件user-info-show.vue中也定义一个方法，用来触发自定义事件(userData)，如下代码

methods:{
			sendData(param){
				this.$emit('userData',param);
			}
		}

在父组件index.vue中增加这个自定义事件，并把回调函数childData给他，如下代码 @userData=“childData”

<user-info-show :userInfos="userInfos" @userData="childData"></user-info-show>

此时childData中就能接收到子组件的数据。

综上总结一下写法就是如下，

父组件：
<user-info-show @userData="childData"></user-info-show>
export default {
    methods:{
        childData(param){
        }
    }
}

子组件：
<view  @click="sendData(userInfo)"></view>
export default {
    methods:{
        sendData(param){
        	this.$emit('userData',param);
        }
    }
}

问题项

跨域

uni.request({
					url: 'http://192.168.3.92:8088/api/userinfo/findUsers',
					method: 'GET',
					data: {},
					dataType:"json",
					success: res => {
						this.userInfos = res.data.data;
						console.log(res)
					},
					fail: () => {},
					complete: () => {}
				});

如上所示，在浏览器请求 http://192.168.3.92:8088/api/userinfo/findUsers 这个地址时存在跨域问题。

此时在manifest.json中增加H5跨域方面的配置，如下所示，

"h5": {
		"devServer": {
			"proxy": {
				"/root/": {   //匹配的头部
					"target": "http://192.168.3.92:8088",  //目标路径
					"pathRewrite": {
						"^/root/": ""  //需要将  /root/  这个单词替换为空
					}
				}
			}
		}
	}

这样上述请求就可以写为 /root/api/userinfo/findUsers，

如果不加 ^/root/ 的话，最终替换会变为 /root/http://192.168.3.92:8088/api/userinfo/findUsers, 所以需要将 /root/ 替换为空字符串。
这样上述请求就可以写为 /root/api/userinfo/findUsers，

如果不加 ^/root/ 的话，最终替换会变为 /root/http://192.168.3.92:8088/api/userinfo/findUsers, 所以需要将 /root/ 替换为空字符串。

PS： 修改配置后需要重启工程，否则新配置不会生效。