vue之间的传值问题---7ref实现组件之间传值

1.父组件向子组件传值 ：父组件可以通过ref属性获取子组件的实例，进而访问子组件的方法和数据。

父组件
<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>

子组件


<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数据属性中，并在模板中显示

2. 子组件通知父组件: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>