当前位置:   article > 正文

前端Vue日常工作中--Watch数据监听_vue子组件监视数据变化

vue子组件监视数据变化

Watch数据监听

普通应用

在Vue.js中,watch 选项用于监视Vue实例的数据变化,并在数据变化时执行相应的操作。watch 可以用于监听单个数据属性的变化,也可以用于监听嵌套对象或数组的变化。

1.1监听单个属性的变化:

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="messageInput" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      messageInput: '',
    };
  },
  watch: {
    // 监听 message 属性的变化
    message(newValue, oldValue) {
      console.log('message 发生变化:', newValue, oldValue);
    },
  },
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

使用 watch 选项监听 message 属性的变化。每当 message 发生变化时,watch 中的回调函数将被调用,可以获取新值 newValue 和旧值 oldValue

1.2监听嵌套对象的变化:

<template>
  <div>
    <p>{{ user.name }}</p>
    <input v-model="user.name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John Doe',
        age: 25,
      },
    };
  },
  watch: {
    // 监听 user 对象的变化
    'user.name'(newValue, oldValue) {
      console.log('user.name 发生变化:', newValue, oldValue);
    },
  },
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

监听user.name 属性的变化。注意,如果要监听嵌套属性,可以使用字符串形式的属性路径。

1.3深度监听整个对象或数组:

<template>
  <div>
    <p>{{ items.join(', ') }}</p>
    <button @click="addItem">添加项</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
    };
  },
  watch: {
    // 深度监听整个 items 数组的变化
    items: {
      handler(newValue, oldValue) {
        console.log('items 数组发生变化:', newValue, oldValue);
      },
      deep: true,
    },
  },
  methods: {
    addItem() {
      this.items.push('New Item');
    },
  },
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

使用 deep: true 选项,以便深度监听整个 items 数组的变化。当数组中的项发生变化时,watch 中的回调函数将被调用。可用于响应式地处理数据的变化,执行一些逻辑或者触发其他操作。

组件中应用(父子组件)

在Vue.js中,使用watch选项可以方便地在父组件中监听子组件的数据变化,或者在子组件中监听父组件传递的props的变化。

2.1在父组件中监听子组件的数据变化:

子组件 Child.vue:
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Child!',
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message from Child!';
    },
  },
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
父组件 Parent.vue:
<template>
  <div>
    <child-component :child-message="childMessage" @child-message-changed="handleChildMessageChange" />
    <p>父组件收到子组件消息:{{ childMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './Child.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      childMessage: '',
    };
  },
  methods: {
    handleChildMessageChange(newMessage) {
      console.log('父组件收到子组件消息变化:', newMessage);
      this.childMessage = newMessage;
    },
  },
  watch: {
    childMessage(newChildMessage, oldChildMessage) {
      console.log('父组件监听到子组件消息变化:', newChildMessage, oldChildMessage);
    },
  },
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

父组件通过在模板中使用子组件 <child-component>,并传递 child-message 属性,来与子组件进行通信。子组件中通过点击按钮更新 message 数据,并通过 $emit 方法触发 child-message-changed 事件,将新的消息传递给父组件。

父组件中,通过监听 childMessage 属性的变化,可以在 watch 中捕获到子组件数据的变化。在 handleChildMessageChange 方法中,父组件也通过事件监听方式处理了子组件数据变化。

2.2在子组件中监听父组件传递的props的变化:

子组件 Child.vue:
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['parentMessage'],
  watch: {
    parentMessage(newParentMessage, oldParentMessage) {
      console.log('子组件监听到父组件传递的props变化:', newParentMessage, oldParentMessage);
    },
  },
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
父组件 Parent.vue:
<template>
  <div>
    <child-component :parent-message="parentMessage" />
    <button @click="updateParentMessage">更新父组件消息</button>
  </div>
</template>

<script>
import ChildComponent from './Child.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!',
    };
  },
  methods: {
    updateParentMessage() {
      this.parentMessage = 'Updated message from Parent!';
    },
  },
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

父组件通过使用子组件 <child-component> 并传递 parent-message 属性,将数据传递给子组件。在子组件中,通过 watch 监听 parentMessage 属性的变化,可以捕获到父组件传递的props的变化。

无论是在父组件中监听子组件的数据变化,还是在子组件中监听父组件传递的props的变化,watch 都是一个有用的工具,可以用于在Vue.js应用中响应式地处理数据的变化。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/69549?site
推荐阅读
相关标签
  

闽ICP备14008679号