如何在Vuejs中监听组件的道具变化的例子

这篇文章是一个关于如何在Vuejs中监听组件的道具变化的例子。

vuejs中的props是用来将值从父组件传递给子组件的，默认情况下也称为单向绑定。有些时候，我们想通过监听道具的变化来了解什么被改变，以及它之前的值。

父组件中的道具包含初始值，子组件将其值作为本地值并进行必要的修改。

在vuejs中，watch函数提供了观察变化的功能。

观察函数的语法：

export default {
  name: "ChildComponent",
  props: ["name"],
  watch: {
    name: function (newValue, oldValue) {
      console.log("newValue: %s, previousValue: %s", newValue, oldValue);
    },
  },
};

让我们声明一下ChildComponent.vue

在ChildComponent.vue中，属性从父组件接收并显示在浏览器上。

有一个watch函数来监听变化，发出旧值和新值。

<template>
  <div>
    <h1>hello, {{ name }}</h1>
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  props: {
    name: String,
  },
  watch: {
    name: function (newValue, oldValue) {
      console.log("newValue: %s, previousValue: %s", newValue, oldValue);
    },
  },
};
</script>

ParentComponent.Vue 在这里，属性是用props语法传递给子组件的。

<template>
  <div id="app">
    <ChildComponent :name="asdasdfad" />
    <button @click="name = 'Hello Frank'">Click me</button>
  </div>
</template>

<script>
import { ChildComponent } from "./components/ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  data() {
    return {
      name: "Hello John",
    };
  },
};
</script>