vue3 watch监听 父子组件通信

目录

01 watch监听方式

02 父子组件的通信

---

 

01 watch监听方式

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

                默认直接就是深层监听

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

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

                deep:true,

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

           })

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

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

                deep:true

                immediate:true

        })

02 父子组件的通信

        父给子传数据:

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

                2. 通过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:父组件传过来的变量名"]