vue-06-watch监听器

拼搏现实的明天。 2023-07-25 14:13 9阅读 0赞

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、父子组件传值

详情请见 ：