Vue父、子组件传参,子组件监听父组件参数变化:
warning:
这篇文章距离上次修改已过204天,其中的内容可能已经有所变动。
<template>
<div>
<!-- 父组件模板内容 -->
<ChildComponent :parentData="parentData" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentData: 'initial data'
};
}
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<!-- 子组件模板内容 -->
{{ parentData }}
</div>
</template>
<script>
export default {
props: {
parentData: {
type: String,
default: ''
}
},
watch: {
parentData(newValue, oldValue) {
// 当 parentData 变化时,这个函数会被调用
console.log(`parentData changed from ${oldValue} to ${newValue}`);
}
}
};
</script>
在这个例子中,父组件传递了一个名为 parentData
的prop给子组件。子组件通过 props
接收这个参数,并使用 watch
来监控 parentData
的变化。当 parentData
发生变化时,子组件中的 watch
函数会被触发,并执行相应的逻辑。
评论已关闭