vue3中watch监听props传参

在Vue3中，`watch` 钩子可以用于监听来自父组件通过 `props` 传递的数据变化。当父组件的属性值发生变化时，`watch` 可以自动捕获这个更新并执行你指定的回调函数。

以下是使用 `watch` 监听 `props` 的基本步骤：

1. 定义一个 `watch` 对象，并设置 `handler` 函数作为回调。在这个函数里，你可以访问到传入的 prop 以及它的旧值和新值。

export default {
  props: {
    myProp: {
      type: String,
      default: 'default value'
    }
  },
  setup(props) {
    // 使用 watch 函数
    const handleNewPropChange = (newVal, oldValue) => {
      console.log(`myProp has changed from ${oldValue} to ${newVal}`);
      // 这里可以对新值进行处理
    };

    // 观察 myProp 的变化
    this.$watch('myProp', handleNewPropChange);
    
    return {}; // 返回空对象，因为 Vue 3 的setup不需要返回任何值
  }
}

相关问题

vue3中watch监听props参数

在Vue3中，可以使用`watch`函数来监听`props`参数的变化。具体实现如下：

import { watch } from 'vue';

export default {
  props: {
    propA: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    watch(() => props.propA, (newVal, oldVal) => {
      console.log(`propA changed from ${oldVal} to ${newVal}`);
    });
  }
}

在`watch`函数中，第一个参数是一个函数，返回需要监听的值，这里是`props.propA`。第二个参数是一个回调函数，当监听的值发生变化时会被调用。

vue2用watch监听props属性

在Vue2中，可以使用`watch`选项来监听`props`属性的变化。

假设有一个组件`MyComponent`，其中有一个`props`属性`myProp`，需要监听它的变化：

Vue.component('MyComponent', {
  props: ['myProp'],
  watch: {
    myProp: function(newVal, oldVal) {
      console.log('myProp changed from ' + oldVal + ' to ' + newVal);
    }
  }
});

在上面的代码中，我们在组件的`watch`选项中定义了一个`myProp`的监听器。当`myProp`的值发生变化时，该监听器将被调用，并输出新旧值。

注意，如果`props`属性是对象或数组，需要使用深度监听来检测其内部属性的变化。可以在监听器中设置`immediate: true`选项，来在组件创建时立即调用监听器并执行初始化操作。

Vue.component('MyComponent', {
  props: {
    myProp: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    myProp: {
      handler: function(newVal, oldVal) {
        console.log('myProp changed from ', oldVal, ' to ', newVal);
      },
      deep: true,
      immediate: true
    }
  }
});