vue3 watch监听 父子组件通信

目录

[01 watch监听方式](#01 watch监听方式)

[02 父子组件的通信](#02 父子组件的通信)


01 watch监听方式

1.watch(被监听的变量,(新值,旧值)=>{ })

默认直接就是深层监听

如果想要配置深度监听和默认触发 需要在第三个参数定义options对象

2.watch(被监听的变量,()=>{},{

deep:true,

immediate:true 项目打开后就执行一次

})

3.如果监听对象中的某个属性

watch(()=>obj2.per,(newVal,oldVal)=>{

deep:true

immediate:true

})

02 父子组件的通信

父给子传数据:

1 在父组件模板中找到子组件标签

  1. 通过v-bind 绑定一个自定义属性名 值为传递的变量

3.在子组件的js的大括号里面 通过props注册传递过来的属性名

4.这个属性名就可以当做一个变量直接使用 或者js里面通过this.获取

setup函数的第一个参数就是props 可以拿到父组件给子组件传递过去的数据

vue3中父组件给子组件传递数据 依然是单项数据流

子给父传参:

1.从setup函数的第二个参数中解构出来emit方法

2.调用emit方法 给父组件传递参数 其他的和之前一样

在vue2.x中 父子组件双向数据绑定 使用了.sync时间修饰符

在vue3.x中 跟v-model合并到一起使用了

父子组件双向数据绑定

vue3.x 使用v--model实现 父子双向数据流

父组件:

<Child v-model:传过去的自定义变量名="传过去的变量名"></Child>

子组件使用props接收传递过去的变量名

更改时:

emit('update:父组件传过来的变量名','新值')

别忘记 emits注册一下 emits:["update:父组件传过来的变量名"]

相关推荐
涵信7 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
谈不譚网安8 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板13 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩14 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真20 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
凉豆菌2 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html