vue3+uni——watch monitors data in props (component parameter receiving and passing defineProps, defineEmits)

Case Description

Subcomponent B referenced by page A

A page

<template>
	<view>
	    //引用组件
		<serviceOrder @change="change" :list="list" :current="type"></serviceOrder>
	</view>
</template>

<script setup>
	import serviceOrder from '@/components/serviceOrder/serviceOrder.vue'
	const type = ref(0)
	// 切换tab
	function change(e) {
      
      
		type.value = e
	}
</script>

B subcomponent

<template>
	<view>
		<view class="orderTab">
			<block v-for="(item,index) in tabs" :key="index">
				<view class="tabItem" @click="change(index)" :class="index == current2?'active':''">
					{
   
   {item.name}}
				</view>
			</block>
		</view>
	</view>
</template>

<script setup>
	import {
      
      
		ref,
		watch
	} from 'vue'
	// 接收值
	const props = defineProps({
      
      
		current: {
      
      
			type: Number,
			default: 0
		}
	})
	// 接收方法
	const emit = defineEmits(['change'])
	const tabs = ref([{
      
      
		name: '全部',
		type: 0
	}, {
      
      
		name: '待付款',
		type: 1
	}, {
      
      
		name: '待服务',
		type: 2
	}, {
      
      
		name: '已完成',
		type: 3
	}])
	const current2 = ref(0) //默认索引为0的样式
	watch(
		() => props.current,
		(newVal, oldVal) => {
      
      
			current2.value = newVal
		}
	)
	// 切换
	const change = (index) => {
      
      
		current2.value = index // 样式处理
		emit('change', current2.value)//传递方法
	}
</script>

<style lang="scss" scoped>
.orderTab {
      
      
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 88rpx;
	background: #FFFFFF;
	padding: 0 29rpx;

	.tabItem {
      
      
		font-size: 28rpx;
		color: #636363;
	}

	.active {
      
      
		position: relative;
	}

	.active:after {
      
      
		content: '';
		position: absolute;
		left: 50%;
		bottom: -10rpx;
		transform: translateX(-50%);
		width: 40rpx;
		height: 5rpx;
		background: #2CB6DB;
		border-radius: 50rpx;
	}
}
</style>

In this case, why does the variable used to display the blue underline style by judgment in the subcomponent not use current but current2? You will find that the value received by the component cannot be used for secondary processing in the following method, so this is another A variable current2 is defined, and the style judgment can be written as it is changed. After that, the tab click event is exposed and used in page A.
When the value of the current attribute on page A is modified, if you click on a page in page C to 待服务jump to page A and pass parameter 2, then page A accepts the parameter 2 and assigns the type to 2, and then in order to correspond The effect shows that you need to tell the B component who should be in the selected state [picture below]. Everything is there. :current = "type"

The subcomponent uses definePropsthe received parameter 2, and the watch monitors this variable all the time. Once the variable changes, it executes the operation. Current2 is equal to the latest 2, so there will be a blue bar under "to be served".

watch(
	() => props.current,
	(newVal, oldVal) => {
    
    
		current2.value = newVal
	}
)

question

If you encounter errors such as ref and watch is not defined,
you will report an error if you use watch directly in the setup of vue3, and you need to use import to import it before it can be used.

import {
    
     ref,	watch	} from 'vue'