当前位置 : 主页 > 网络编程 > JavaScript >

Vue中watch监听第一次不触发、深度监听问题

来源:互联网 收集:自由互联 发布时间:2023-02-08
目录 watch监听第一次不触发、深度监听 第一次不触发 例如 vue watch使用无效问题 watch监听第一次不触发、深度监听 第一次不触发 handler :其值是一个回调函数。即监听到变化时应该执行
目录
  • watch监听第一次不触发、深度监听
    • 第一次不触发
    • 例如
  • vue watch使用无效问题

    watch监听第一次不触发、深度监听

    第一次不触发

    • handler:其值是一个回调函数。即监听到变化时应该执行的函数。
    • deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
    • immediate:其值是true或false;确认是否以当前的初始值执行handler的函数

    例如

    我将父组件中的WatchId传递到这个子组件页面我要根据id来获取数据watch监听不到一次的数据变化,下面是我的例子

    <script>
    export default {
        props:{
            WatchId:{
                type:Number,
                default:''
            }
        },
        data(){
            return{
              editWatchId:'',
     
        },
        watch:{
            WatchId:{
                immediate:true,
                handler(id){
                 console.log(id)
                 this.editWatchId=id
                }
            }
        },
      
        }
    }
    </script>

    vue watch使用无效问题

    watch 用于监听,有时无法执行可以在组件上添加

    :key="new Date().toString()"

    通过时间来实时刷新组件内容,示例:

    <el-dialog class="dialog-update"
                           width="880px“
                           :modal="false"
                           :close-on-click-modal="false"
                           :visible.sync="checkReceiptVisible">
            <ReceiptDetail v-if="checkReceiptVisible" :key="new Date().toString()"/>
     </el-dialog>

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持易盾网络。

    上一篇:Ant&nbsp;Design&nbsp;的Bug修复示例详解
    下一篇:没有了
    网友评论