vue3子组件监听props值的变化

如何监听props

最近在开发的过程中遇到父组件传参到子组件后，子组件需要对传过来的数据进行修改，就需要重新定义一个实例来接收父组件传递过来的数据。当改变父组件的的数据后，子组件中定义的值需要监听到父组件中数据的变化，也就是需要监听props中的数据。我们需要用到vue3中的侦听器watch

这里通过监听整个props或者监听props中的具体属性来更新子组件中定义的实例

• 监听整个props

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
    listData: {
        type: Array,
        default: [],
    }
});
const childList = ref([])
watch(props, (nweProps)=>{
    childList.value = nweProps.listData
})
</script>

• 监听props中的具体属性

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
    listData: {
        type: Array,
        default: [],
    }
});
const childList = ref([])
watch(
    () => props.listData,
    (newProps) => {
        childList.value = newProps.listData
    }
);
</script>

以上方法仅供参考

vue3的侦听器用法详见官方文档