Vue3监听属性值

Vue3使用watch 监听属性

遇到父组件传递子组件，父组件属性值改变时子组件数据不更新问题,使用watch监听属性解决。

<!--A组件-->
<template>
<div class="input-container">
	<!--子组件B-->
	<cominput :inputValue="inputValue" />
</div>
</template>

<script>
	import {defineComponent,ref} from 'vue'
	import cominput from '@/components/cominput.vue'
	export default defineComponent({
		components: {
			cominput
		},
		setup(props, ctx) {
				let inputValue=ref('123')
			return {
				inputValue
			}
		}
	})
</script>

子组件 记得引入watch

<template>
	<div class="cominput-container">
		<input class="com-input" v-model="value" :style="{width: width + '%',height: height+'%'}" />
	</div>
</template>

<script>
	// @ is an alias to /src
	import {
		defineComponent,
		toRefs,
		reactive,
		watch
	} from 'vue'
	export default defineComponent({
		props: {
			inputValue: {
				type: String,
				default: null
			}
		},
		setup(props, ctx) {
			// 父组件传递属性props.inputValue
			// before之后值
			// after为改变之前值
			watch(() => props.inputValue, (before, after) => {
				//业务需求操作 
				data.value=before
			}, {
				deep: true // 深度监听的参数
			})
			
			let data = reactive({
				value: props.inputValue
			});
			return {
				...toRefs(data)
			}
		}
	})
</script>

普通监听方法

watch(props.inputValue,(before, after) => {
				// 业务
})