概述

在Vue 2中，可以使用ref属性在父子组件之间传递值。父组件可以通过ref属性获取子组件的实例，进而访问子组件的方法和数据。

父组件向子组件传值

示例

父组件 (Parent.vue):

<template><div><child-component ref="child"></child-component><button @click="sendToChild">Send to Child</button></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {'child-component': ChildComponent},methods: {sendToChild() {//获取子组件实例const child = this.$refs.child;if (child) {//调用子组件方法进行传值child.receiveValue('Hello from parent!');}}}
};
</script>

子组件 (ChildComponent.vue):

<template><div><p>{{ message }}</p></div>
</template><script>
export default {data() {return {message: ''};},methods: {//接收父组件传输数据的方法receiveValue(value) {this.message = value;}}
};
</script>

在这个例子中，父组件通过ref属性为子组件创建了一个引用名称为child。当点击按钮时，父组件的sendToChild方法被触发，它通过this.$refs.child获取子组件的实例，并调用子组件的receiveValue方法，将值传递给子组件。子组件接收到值后，将其设置到自己的message数据属性中，并在模板中显示。

子组件通知父组件

vue关闭弹窗刷新父页面
在Vue中，如果你需要在关闭模态窗口（弹窗）时刷新父页面，你可以在模态窗口关闭的事件中发出一个事件给父页面，然后在父页面监听这个事件来执行刷新操作。

示例

父页面代码：

<template><div><button @click="openModal">打开弹窗</button><child-component @refresh="refreshPage"></child-component></div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {components: {ChildComponent},methods: {refreshPage() {// 这里实现页面的刷新逻辑console.log('父页面刷新');// 例如，可以重新请求数据// this.fetchData();},openModal() {// 打开模态窗口的逻辑}}
};
</script>

子组件（弹窗）代码：

<template><div><!-- 弹窗内容 --><button @click="closeModal">关闭弹窗</button></div>
</template><script>
export default {methods: {closeModal() {// 关闭模态窗口的逻辑this.$emit('refresh'); // 当弹窗关闭时，发出 'refresh' 事件}}
};
</script>

在这个例子中，当子组件（弹窗）关闭时，它会发出一个名为 refresh 的事件。父页面通过监听这个事件来执行刷新操作。你可以在 refreshPage 方法中实现具体的刷新逻辑，比如重新请求数据等。