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

🐒个人主页

🏅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 Data</button><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>

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

<!-- ChildComponent.vue -->
<template><div><button @click="updateParentData">Update Parent Data</button></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><!-- 这个是导入的组件标签，@Add-event是响应事件 --></div>
</template><script>
import Add from './Add.vue';
export default {components:{Add},methods: {add(data){//🎀🎀🎀🎀🎀🎀if(data==true){//组件信息交互--🎀🎀🎀🎀🎀🎀🎀🎀// 在此处执行向后端发送 get 请求的逻辑，更新表格//这里写需要父组件执行的指令}}}
}	
</script>