uni-app使用props和$emit实现父组件与子组件的数据传递

props实现父组件向子组件传递数据

<template>
	<view class="content">
		<testone :title="title"></testone>
	</view>
</template>

<script>
	import testone from '../../components/testone/testone.vue'
	export default {
		components:{
			testone
		},
		data() {
			return {
				title: '你好呀'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}

<template>
	<view>
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				type:String,
				default:"hello"
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

父子组件的代码如上：
1.需要在父页面中引入子组件

2.为子组件绑定动态数据title，并在data中返回你想要传递的数据

到此为止相当于在父组件中定义好了想要传递的参数，并且交给了子组件，下面要做的是子组件把这个参数引入进来。
3.在子组件中引入

这样就实现了在父组件中声明一个变量，并在子组件中接收后渲染的功能。

使用$emit实现子组件向父组件传递数据
不同于父组件对子组件的传值，至于要在父组件定义下参数，子组件props接收。我们首先需要在子组件list里定义点击事件change：


这里是用到了swiper的组件，有一个滑动的效果，懒得自己编一个例子了，抱歉，这里的change方法中的e参数代表了滑动轮播图时返回的一些数据，e.detail表示当前轮播图是第几个，这里只要明白是定义了个方法，滑动轮播图，会把当前轮播图的编号用emit发出去，编号值为current，参数名为change。
接着我们也需要在父组件中定义方法：


这里的方法名和点击事件名都可以随意定义，但是参数值current，必须跟子组件一致。
明天加个总结。