vue3+uni——watch监听props中的数据(组件参数接收与传递defineProps、defineEmits)

案例说明

A页面引用的子组件B

A页面

<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子组件

<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>

在这里插入图片描述

在此案例中,子组件中 用来通过判断来显示蓝色下划线样式的 变量为什么没有用current而是用的current2,你会发现组件接收的值不能在下面方法中二次处理使用,所以这个又定义了一个变量current2,改怎么写就怎么写样式判断。之后tab点击的事件暴露出去,在A页面里面使用。
当A页面current属性值被修改的时候,假如C页面中点击某个待服务跳转到A页面并传了参数2,这时候A页面接受该参数2,并将type的类型赋值为2,之后为了对应的效果显示,需要告诉B组件,目前应该是处于谁被选中的状态【下图】。所有就有了:current = "type"
在这里插入图片描述
子组件使用 defineProps接收传过来的参数2,watch一直监听这个变量,一旦这个变量有变化,那么执行操作,current2等于最新的2,这样“待服务”下面就有蓝条条了。

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

问题

如果遇到了ref、watch is not defined等报错,
vue3的setup里面直接使用watch会报错,需要使用import引入之后才可使用。

import { ref,	watch	} from 'vue'

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/91118.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud超详细教程

1.认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢&#xff1f; 1.0.学习目标 了解微服务架构的优缺点 1.1.单体架构 单体架构&#xff1a;将业务的所有…

vue中实现echarts三维散点图

需要安装 echarts 同时引入 echarts-gl 我安装的版本&#xff1a; "echarts": "^5.3.2", "echarts-gl": "^2.0.9", import Vue from "vue"; import * as echarts from "echarts"; Vue.prototype.$echarts echa…

Spring 学习源码的基础 核心原理与核心概念

文章目录 核心原理AnnotationConfigApplicationContextIoC 容器加载流程Spring 中如何创建一个对象Bean 的创建过程 (生命周期)单例 原型推断构造方法依赖注入AOP 动态代理判断是否需要 AOP 的大致流程CGLib 做 AOP 的大致流程事务事务代理对象执行方法的流程事务注解排至失效的…

使用yapi生成漂亮接口文档

YApi-教程 1. 进入yapi 的菜单 2. 从微服务中导出swagger的json 从浏览器页面访问http://localhost:端口/服务/swagger-ui.html&#xff0c;然后打开浏览器的控制台&#xff0c;查看network&#xff0c;刷新下页面&#xff0c;找到XHR中的api-docs&#xff0c;然后查看res…

基于Java+SpringBoot+Vue前后端分离公交线路查询系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

stm32读写片内flash项目总结(多字节读写tongxindu)

1.flash操作驱动程序 a头文件 #ifndef FLASH_H #define FLASH_H #include “stm32f4xx.h” #define BOARD_NUM_ADDR 0x0800C000 #define STM32_FLASH_BASE 0x08000000 //STM32 FLASH的起始地址 #define FLASH_WAITETIME 50000 //FLASH等待超时时间 //FLASH 扇区的起始地址…

openGauss学习笔记-51 openGauss 高级特性-列存储

文章目录 openGauss学习笔记-51 openGauss 高级特性-列存储51.1 语法格式51.2 参数说明51.3 示例 openGauss学习笔记-51 openGauss 高级特性-列存储 openGauss支持行列混合存储。行存储是指将表按行存储到硬盘分区上&#xff0c;列存储是指将表按列存储到硬盘分区上。 行、列…

el-backtop返回顶部的使用

2023.8.26今天我学习了如何使用el-backtop组件进行返回页面顶部的效果&#xff0c;效果如&#xff1a; <el-backtop class"el-backtop"style"right: 20px; bottom: 150px;"><i class"el-icon-caret-top"></i></el-backtop&…

Markdown初级使用指南

前言 大家好&#xff0c;我是艾老虎尤&#xff0c;我在一篇官方的文章中&#xff0c;我了解到了markdown&#xff0c;原本我写博客一直是使用的富文本编译器&#xff0c;之前我也有同学叫我使用MD&#xff0c;但是我嫌它复杂&#xff0c;就比如说一个标题&#xff0c;我在富文…

STM32 Cubemx配置串口收发

文章目录 前言注意事项Cubemx配置printf重定向修改工程属性修改源码 测试函数 前言 最近学到了串口收发&#xff0c;简单记录一下注意事项。 注意事项 Cubemx配置 以使用USART1为例。 USART1需配置成异步工作模式Asynchronous。 并且需要使能NVIC。 printf重定向 我偏向…

AURIX TriCore内核架构学习笔记

名词缩写 ISA - Instruction Set Architecture&#xff0c;指令集架构PC - Program Counter, holds the address of the instruction that is currently runningGPRs - 32 General Purpose RegistersPSW - Program Status WordPCXI - Previous Context InformationCSA - Conte…

改进YOLO系列:10.添加NAMAttention注意力机制

添加NAMAttention注意力机制 1. NAMAttention注意力机制论文2. NAMAttention注意力机制原理3. NAMAttention注意力机制的配置3.1common.py配置3.2yolo.py配置3.3yaml文件配置1. NAMAttention注意力机制论文 论文题目:NAM: Normalization-based Attention Module 论文…

Python——列表(list)推导式

本文基于python3。 目录 1、Python推导式2、列表(list)推导式2.1、定义2.2、实际操作2.2.1、一个表达式&#xff0c;后面为一个 for 子句2.2.2、一个表达式&#xff0c;后面为一个 for 子句&#xff0c;然后&#xff0c;跟着if 子句。2.2.3、一个表达式&#xff0c;后面为一个…

matlab使用教程(21)—求函数最值

1. 求函数最优值 1.1求一元函数的最小值 如果给定了一个一元数学函数&#xff0c;可以使用 fminbnd 函数求该函数在给定区间中的局部最小值。例如&#xff0c;请考虑 MATLAB 提供的 humps.m 函数。下图显示了 humps 的图。 x -1:.01:2; y humps(x); plot(x,y) xlabel(x)…

[管理与领导-50]:IT基层管理者 - 8项核心技能 - 5 - 沟通是润滑剂

目录 前言&#xff1a; 一、什么是沟通 1.1 定义 1.2 沟通模型 1.3 沟通的六层次模型 1.4 为什么需要沟通 二、沟通的五维度 三、沟通的原则 3.1 以终为始 3.2 双赢思维&#xff1a;人们只会做对自己有利的事 3.3 牵善的思维 四、沟通的过程 五、沟通技巧 六、深…

移动端和PC端对比【组件库+调试vconsole +构建vite/webpack+可视化echarts/antv】

目录 组件库 移动端 vue vant PC端 react antd vue element 调试&#xff1a;vconsole vs dev tools中的控制台&#xff08;Console&#xff09; ​​​​​​​vconsole&#xff1a;在真机上调试 构建工具 webpack 原理 Babel&#xff1a;JS编译器&#xff08;…

sql server 快速安装

目录标题 一、下载二、直接选择基本安装二、下载ssms&#xff08;数据库图形化操作页面&#xff09;三、开启sa账号认证&#xff08;一&#xff09;第一步&#xff1a;更改身份验证模式&#xff08;二&#xff09;第二步&#xff1a;启用 sa 登录四、开启tcp/ip 一、下载 下载…

Visual Studio 2022 右键单击项目没有出现View | View Class Diagram(Visual Studio 无法使用类设计器)

文章目录 问题描述原因.NET Core项目.NET Framework项目 其他VS2022相关文章 问题描述 当我们在Solution Explorer窗口右键单击项目时&#xff0c;快捷菜单中没有出现“查看”&#xff0c;或者出现了“查看”&#xff0c;但是“查看”里没有View Class Diagram。 原因 首先…

大彩串口屏使用记录

写在最前面 屏幕型号 DC10600M070 IDE VisualTFT&#xff08;官方&#xff09; VSCode&#xff08;lua编程&#xff09; 用之前看一下官方那个1小时的视频教程就大概懂控件怎么用了&#xff0c;用官方的软件VisualTFT很简单 本文只是简单记录遇到的一些坑 lua编辑器 VisualTF…

设计模式之抽象工厂

文章目录 一、介绍二、基本组件三、演示案例1. 定义抽象工厂2. 定义抽象产品3. 定义具体工厂4. 定义具体产品5. 代码演示6. 代码改造 四、总结 一、介绍 抽象工厂模式(Abstract Factory Pattern)属于创建型设计模式。用于解决比工厂方法设计模式更加复杂的问题。 复杂到哪里了…