vue watch 的简单使用

在项目开发中遇到的需求,这点写第一个dome

监听父组件传过来的值发送变化

在子组件中
<template>   <div class="components">{{mes}}</div> </template>
<script>
export default {
  props:['message'],//父组件传过来的值
  data(){
    return{
      mes:1
    }
  },
  watch:{
    //最普遍的用法,当传过来的message变化时才会去监听并执行
    // newval 新值
    // odlval 旧的值
    // message(newval,odlval){
    //   this.mes = newval
    // },


// 如果想让值在最初的时候就执行,需要用到一下两个属性'handler','immediate' // 代表在wacth里声明了message这个方法之后立即先去执行handler方法,如果设置了false,那么效果和上边例子一样 message:{ handler(newval,oldval){ this.mes = newval }, immediate:true//第一次进来就开始监视,而不是等到下次数据改变了才执行 } } } </script>

 

 

上一篇:Vue中computed(计算属性)、methods、watch的区别


下一篇:Vue.js 响应式原理