vue-06-watch监听器

watch监听器，我把它分为两部分来看待，第一部分是，在组件内部监听组件内部属性的变化。第二部分，则是在父子组件传值的时候，监听父组件传递到子组件的值。

1、组件内部的属性监听

第一种：直接监听data内部某个属性值，通过watch来直接监测demo，如果demo的值变化，value的值也会跟着一起变化。

<template>
  <div>
    <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(val) {
        this.value = this.demo;
      }
    }
  };
</script>

 

第二种： 监听data内部某个对象值。如果watch监测的是一个对象的话，直接使用watch是不行的，此时我们可以借助于computed计算属性来完成。

<template>
  <div>
    <el-input v-model="demo.name"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: {
          name: ''
        },
        value: ''
      };
    },
    computed: {
      newName() {
        return this.demo.name;
      }
    },
    watch: {
      newName(val) {
        this.value = val;
      }
    }
  };
</script>

第三种：deep 深度监听对象，或者监听对象内部的属性

<template>
  <div>
    <el-input type="text" v-model="childrens.name" />
	{{childrens}}
	{{childrens.name}}
    <el-input type="text" v-model="lastName" />
	{{lastName}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      childrens: {
        name: '小强',
        age: 20,
        sex: '男'
      },
      tdArray: ['1', '2'],
      lastName: '张三'
    }
  },
  watch: {
	//对象内部的属性监听，也叫深度监听
    childrens: {
      handler: function(val, oldval) {
		 alert(val)
	  },
      deep: true
	},
	// 键路径必须加上引号
    'childrens.name': function(val, oldval) {
		alert(val + 'aaa')
    },
    lastName(lastName, oldval) {
		alert(lastName)
    }
  }
}
</script>

2、父子组件传值

详情请见 ：