vue2子组件监听props变化

在Vue 2中，子组件可以通过`watch`选项或`computed`属性来监听父组件传递的props变化。

1. 使用`watch`选项：

Vue.component('child-component', {
  props: ['message'],
  watch: {
    message: function(newVal, oldVal) {
      // 监听props变化，并执行相应的操作
      console.log('props变化了', newVal, oldVal);
    }
  }
});

2. 使用`computed`属性：

Vue.component('child-component', {
  props: ['message'],
  computed: {
    // 监听props变化，并返回相应的计算结果
    updatedMessage: function() {
      console.log('props变化了', this.message);
      // 执行其他操作
      return this.message + ' - updated';
    }
  }
});

无论是使用`watch`选项还是`computed`属性，都可以在子组件中监听props的变化，并根据需要执行相应的操作。

相关问题

vue2子组件监听props数据变化代码

在 Vue2 中，子组件监听父组件传递的 Prop 数据变化，可以通过 `watch` 来实现。具体的代码如下：

Vue.component('child-component', {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  watch: {
    message: function(newVal, oldVal) {
      console.log('Prop message changed: ', newVal, oldVal)
    }
  }
})

在子组件中定义 `watch` 属性，监听父组件传递的 `message` Prop 数据变化。当 `message` 数据变化时，`watch` 函数会被触发，可以在函数中获取新旧值并进行相应的处理。

需要注意的是，如果需要监听对象或数组的变化，需要使用深度监听，即在 `watch` 中使用 `{ deep: true }` 选项。

Vue.component('child-component', {
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    items: {
      handler: function(newVal, oldVal) {
        console.log('Prop items changed: ', newVal, oldVal)
      },
      deep: true
    }
  }
})

在上面的代码中，我们监听了父组件传递的 `items` Prop 数组变化，并使用了深度监听。当数组中的元素发生变化时，`watch` 函数会被触发，并打印出新旧值。

vue子组件监听props变化

当Vue子组件需要监听父组件传递的props的变化时，可以使用`watch`来监听props的变化。在子组件中，可以通过`props`选项来声明props，然后在`watch`选项中监听props的变化。

以下是一个示例：

// 父组件
<template>
  <div>
    <child-component :prop1="parentProp"></child-component>
    <button @click="changeProp">Change Prop</button>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue';
  
  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        parentProp: 'Initial Prop Value'
      }
    },
    methods: {
      changeProp() {
        this.parentProp = 'New Prop Value';
      }
    }
  }
</script>

// 子组件
<template>
  <div>{{ prop1 }}</div>
</template>

<script>
  export default {
    props: {
      prop1: String
    },
    watch: {
      prop1(newValue, oldValue) {
        console.log(`Prop1 changed from ${oldValue} to ${newValue}`);
      }
    }
  }
</script>

在这个示例中，父组件传递一个字符串类型的prop到子组件中，并且在父组件中提供了一个按钮来改变prop的值。子组件中声明了一个名为`prop1`的prop，并在`watch`选项中监听它的变化。当父组件改变`prop1`的值时，子组件的`watch`函数会被调用，打印出prop的旧值和新值。

需要注意的是，当在子组件中直接修改prop的值时，Vue会发出一个警告。因此，最好遵循单向数据流的原则，只在父组件中修改prop的值。