不同组件之间相互传递信息的方式（拓展知识）

个人主页

JavaEE系列专栏

前言：

本篇博客主要以介绍不同组件之间如何传递信息的，传递方式包括get()方式（需要跳转）、父子组件之间相互的传递：、其实还有一种是基于主线程来传递的（我没有接触到）

补充知识：不同组件之间通过get（）方式传递信息

传递信息的组件

this.$router.push("/?account="+this.form.account);

接收信息的组件

mounted() {//一般情况下在页面加载时就接收信息，所以一般在mounted的方法中写
			this.form.account=this.$route.query.account;
		}

父组件与子组件之间的信息交互 $emit 方法

应用场景：我们可能会遇到这种情景：当一个子组件完成任务时，我们想让父组件执行一些指令，这时就需要子组件向父组件发送信息，让父组件去执行对应的指令。

父组件给子组件发信息（这个是官方的案例）（原理是事件监听）

这个是父组件里的内容

<template>
  <div>
    <button @click="sendData">Send Databutton>
    <child-component @custom-event="handleCustomEvent">child-component>
  div>
template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    sendData() {
      const data = { name: 'Hello from parent component!' };//这里是准备给子组件传递的信息
      this.$emit('custom-event', data); // 触发自定义事件，发送信息
    }
  },
};
script>

这个是子组件里的内容
在子组件中监听这个自定义事件，并在回调函数中执行相应的逻辑。例如：

<template>
  <div>
    <button @click="updateParentData">Update Parent Databutton>
  div>
template>

<script>
export default {
  methods: {
    updateParentData() {
      const newData = { name: 'Hello from child component!' };//这里是接收父组件传递的信息的容器
      this.$emit('update-parent-data', newData); // 触发自定义事件，并接收新数据对象
    }
  }
};
script>

以下是：子组件给父组件传递信息

子组件给父组件发信息（个人案例）

这个是子组件里的内容

<template>
	<div>
		<el-button type="primary" @click="addSudent()">保 存el-button>
	div>
template>
<script>
export default {
	methods: {
		addSudent(){
			//向父组件Stulist发送更新请求
			const data = true;//子组件向父组件发送的信息
			this.$emit('Add-event', data); // 触发自定义Add-event响应事件
		}
	}
}						
script>
					 

这个是父组件里的内容

<template>
	<div>
		<Add ref="add" @Add-event="add">Add>
		
	div>
template>

<script>
import Add from './Add.vue';
export default {
	components:{
			Add
	},
	methods: {
		add(data){//
			if(data==true){//组件信息交互--
				// 在此处执行向后端发送 get 请求的逻辑，更新表格
				//这里写需要父组件执行的指令
				}
				
			}
	}
}	
script>