uni-app的子组件中watch监听用法

碰到的问题:问题就是通过props传的值来改props中的值发现改不了

1.props

props明话说就是为了初始化组件时候传的默认数据，只能传一次，后续就不能传送。如果想再次更改子组件的数据，只能调用子组件的方法来进行更改。
注：props 初始化的变量不能进行修改，如需修改只能通过watch监听来修改变量的数据

父组件

<template>
	<view>
		<Child @out=out :backGround=backGround></Child>
	</view>
</template>
<script>
	import Child from "../../components/child.vue";
	export default{
		components:{
			Child
		},
		data() {
			return {
				backGround:"red"
			}
		},
		onLoad(){
			this.api_get()
		},
		methods: {
			out(e){
				console.log("接收到的值==>>"+e) //接收方法
			}
			async api_get(){
				let res=await ......
				this.backGround=res.backGround
			}
		}
	}
</script>
<style>
</style>

子组件

<template>
	<view class="content" :style="[{background:backGround}]">
		<button @tap="miss">点击传值</button> //子组件点击事件
	</view>
</template>
 
<script>
	export default {
		props:{
			backGround:{ //参数名
				type:String, //参数名
				default:"#fff" //参数默认
			}
		},
		watch:{
			backGround: {
				handler(new__, old__) {
					this.backGround=new__
				},
				immediate: true,
				deep: true
			},
		},
		methods:{
			miss(){
				this.$emit("out","hahaha") //子传父
			}
		}
	}
</script>