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

最新推荐文章于 2025-03-25 11:05:21 发布

Bruce-li__

最新推荐文章于 2025-03-25 11:05:21 发布

阅读量6.4k

点赞数 1

分类专栏： uni-app 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_44623314/article/details/124752781

版权

uni-app 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在Vue中如何通过props传递数据给子组件，并且说明了props的只读特性。当需要改变子组件状态时，应当使用自定义事件进行父子通信。示例展示了父组件如何更新子组件的背景颜色，并通过watch监听props变化。同时，子组件通过$emit触发事件将值回传给父组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

碰到的问题:问题就是通过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>