uniapp在子组件中修改父组件中的值

其实知道vue的看这个标题应该觉得有问题，不错，的确是有问题，下面慢慢听我娓娓道来

讲这个之前先讲一下在uniapp中自定义组件

1、自定义组件

在根目录新建一个文件夹component,在component中新建子组件

子组件 

<template name="yModel">
	<u-modal v-model="tklSearchModel" mode="center" width="80%" :show-title="false" :show-cancel-button="true" confirm-color="#F06C7A" @confirm="tklConfirm" :async-close="true">
		<view class="u-text-center u-padding-top-40"><u-icon name="search" color="#F06C7A" size="50rpx"></u-icon></view>
		<view class="u-text-center u-padding-top-30 u-font-35" style="font-weight: 610;">是否要搜索以下内容</view>
		<view class="u-text-center u-padding-40" style="word-wrap:break-word">{{searchContent}}</view>
	</u-modal>
</template>

<script>
	export default {
		name: "yModel",
		data() {
			return {
			};
		},
		// 此处定义传入的数据
		props: {
			searchContent:{
				type:String,    //属性类型
				value:"" 
			},
			searchTkl:{
				type:String,    //属性类型
				value:"" 
			},
			tklSearchModel:{
				type:Boolean,    //属性类型
				value :false 
			},
			
		},
		// //组件生命周期
		// created(e) {
		// 	let qqq = this.tklSearchModel;
		// 	console.log(qqq);
		// 	this.tklSearchModel1 = qqq;
		// },
		methods:{
			/**
			 * @tklConfirm 点击弹窗的确认按钮，设置弹窗为false，跳转到搜索页面
			 * this.$emit('closeSearchModel','closeSearchModel'); //子组件向父组件传值：不能直接在组组件中改变父组件的值，为了要关闭弹窗，所以要子组件向父组件传值
			 */
			tklConfirm(){
				this.$jiuaiDebounce.canDoFunction({
					key:"tklConfirm",//基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time:2000,//如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success:()=>{
						this.$emit('closeSearchModel','closeSearchModel');
						uni.navigateTo({
							url: '../searchRes/searchRes?searchContent=' + this.searchContent + '&searchTkl=' + this.searchTkl
						});
					}
				})
			},
		},
	}
</script>

<style>
</style>

在子组件中接受父组件的值用的是 props ，在子组件中要注意 this.$emit('closeSearchModel','closeSearchModel');这个，这个是什么在后面讲，先放在这里

父组件：

<yModel :searchContent="searchContent" :searchTkl="searchTkl" :tklSearchModel="tklSearchModel" @closeSearchModel="closeSearchModel"></yModel>

在父组件中引用子组件

在父组件中的searchContent，searchTkl，tklSearchModel是父组件向子组件传值，这个在子组件中的props可以看出来

@closeSearchModel这个是子组件向父组件传值

2、在子组件中修改父组件中的值

先来说说我的需求：我的需求是默认弹窗是不弹出来的（tklSearchModel:false），在父组件中检测到有满足条件的时候在弹出来（tklSearchModel:true）,也就是当可以弹出来的时候父组件向子组件传值为 tklSearchModel:true ，在子组件中点击按钮跳到其他页面，但是要在跳转前关闭这个弹窗，所以问题就在这里了

下面讲解决方案：

还记得上面的 this.$emit('closeSearchModel','closeSearchModel'); 吧，就是这个东西，子组件向父组件传值用的

子组件中：

父组件中：

在methds中的方法

接受到 closeSearchModel 的值后将 tklSearchModel 设置成false，这就可以改变了父组件的值，关闭了弹窗