vue父组件监听子组件数据更新方式(hook)

当一个Vue组件被渲染后，可能需要在组件外部监听组件内部的数据变化，这时候就需要使用Vue提供的特殊钩子函数来实现了，下面是实现“vue父组件监听子组件数据更新”功能的完整攻略：

1.使用Vue提供的$refs属性

在子组件中定义一个方法，用于在数据更新时触发父组件的方法，并将数据通过参数形式传递给父组件，示例代码如下所示：

//子组件中数据更新时触发父组件的方法并传递参数
methods: {
    updateData: function () {
        this.$emit('data-updated', this.data);
    }
}

在父组件中使用ref属性获取子组件的实例，然后通过监听子组件触发的数据更新事件来实现监听子组件数据变化的功能，示例代码如下所示：

<!-- 父组件模板中 -->
<child-component ref="child" @data-updated="handleDataUpdated"></child-component>

// 父组件中的方法
methods: {
    handleDataUpdated: function (data) {
        console.log('子组件数据更新了，更新后的数据为：', data);
    }
}

2.使用Vue提供的$watch属性

通过定义一个$watch监听器，在子组件的数据更新时调用父组件的方法来实现父组件监听子组件数据变化的功能，示例代码如下所示：

// 父组件中的watch监听器
watch: {
    'childData': function() {
        console.log('子组件数据更新了，更新后的数据为：', this.childData);
    }
}

在子组件中，通过emit事件和props属性将数据传递给父组件，示例代码如下所示：

// 子组件中的数据更新方法
methods: {
    updateData: function () {
        this.$emit('data-updated', this.data);
    }
}

// 父组件中的prop
props: {
    childData: {
        type: Object
    }
}

以上两种方法都可以实现父组件监听子组件数据更新的功能，开发者可以根据实际需求选择不同的方法来实现。