uni-app父子组件传递数据（更新中）

一、子传父数据

第一步：在uni-app项目中的components文件中新建二个子组件名各为user-info-edit.vue、user-info-show.vue

user-info-edit.vue代码：

<template>
	<view>edit</view>
</template>
<script>
	export default {}
</script>
<style scoped lang="less">
</style>
1
2
3
4
5
6
7
8

user-info-show.vue代码：

<template>
	<view>show</view>
</template>
<script>
	export default {}
</script>
<style scoped lang="less">
</style>
1
2
3
4
5
6
7
8

第二步：在pages/index的index.vue代码：

1. 父组件页面引入需要使用的子组件

import userinfoedit from '../../components/user-info-edit.vue';//引入子组件
import userinfoshow from '../../components/user-info-show.vue'//引入子组件
1
2

2. 在父组件注册子组件

		components: {
			"user-info-edit": userinfoedit,//注册子组件
			"user-info-show": userinfoshow//注册子组件
		}
1
2
3
4

3. 使用子组件

		<user-info-edit></user-info-edit>
		<user-info-show></user-info-show>
1
2

   完整的index.vue代码：

<template>
	<view class="content">
		<!-- 第五步：使用子组件 -->
		<user-info-edit></user-info-edit>
		<user-info-show></user-info-show>
	</view>
</template>
<script>
	//第三步:父组件页面引入需要使用的子组件
	import userinfoedit from '../../components/user-info-edit.vue'; //引入子组件
	import userinfoshow from '../../components/user-info-show.vue' //引入子组件

	export default {
		//第四步：在父组件注册子组件
		components: {
			"user-info-edit": userinfoedit, //注册子组件
			"user-info-show": userinfoshow //注册子组件
		}
	}
</script>
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

运行结果：

二、父传子数据（没写）