自已做的网站怎么做域名解析,php租车网站源码,俄文网站开发地点,网页设计报价表文章目录 #x1f412;个人主页#x1f3c5;JavaEE系列专栏#x1f4d6;前言#xff1a;#x1f3e8;补充知识#xff1a;不同组件之间通过get#xff08;#xff09;方式传递信息 #x1f380;父组件与子组件之间的信息交互 $emit 方法#x1f3c5;父组件给子组件发… 文章目录 个人主页JavaEE系列专栏前言补充知识不同组件之间通过get方式传递信息 父组件与子组件之间的信息交互 $emit 方法父组件给子组件发信息这个是官方的案例原理是事件监听子组件给父组件发信息个人案例 个人主页 JavaEE系列专栏 前言
本篇博客主要以介绍不同组件之间如何传递信息的传递方式包括get()方式需要跳转、父子组件之间相互的传递、其实还有一种是基于主线程来传递的我没有接触到
补充知识不同组件之间通过get方式传递信息
传递信息的组件
this.$router.push(/?accountthis.form.account);接收信息的组件
mounted() {//一般情况下在页面加载时就接收信息所以一般在mounted的方法中写this.form.accountthis.$route.query.account;}父组件与子组件之间的信息交互 $emit 方法 应用场景我们可能会遇到这种情景当一个子组件完成任务时我们想让父组件执行一些指令这时就需要子组件向父组件发送信息让父组件去执行对应的指令。 父组件给子组件发信息这个是官方的案例原理是事件监听
这个是父组件里的内容
templatedivbutton clicksendDataSend Data/buttonchild-component custom-eventhandleCustomEvent/child-component/div
/templatescript
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 --
templatedivbutton clickupdateParentDataUpdate Parent Data/button/div
/templatescript
export default {methods: {updateParentData() {const newData { name: Hello from child component! };//这里是接收父组件传递的信息的容器this.$emit(update-parent-data, newData); // 触发自定义事件并接收新数据对象}}
};
/script 以下是子组件给父组件传递信息 子组件给父组件发信息个人案例
这个是子组件里的内容
templatedivel-button typeprimary clickaddSudent()保 存/el-button/div
/template
script
export default {methods: {addSudent(){//向父组件Stulist发送更新请求const data true;//子组件向父组件发送的信息this.$emit(Add-event, data); // 触发自定义Add-event响应事件}}
}
/script
这个是父组件里的内容
templatedivAdd refadd Add-eventadd/Add!-- 这个是导入的组件标签Add-event是响应事件 --/div
/templatescript
import Add from ./Add.vue;
export default {components:{Add},methods: {add(data){//if(datatrue){//组件信息交互--// 在此处执行向后端发送 get 请求的逻辑更新表格//这里写需要父组件执行的指令}}}
}
/script
