vue实现父子路由（组件）传值

最新推荐文章于 2024-04-29 20:03:13 发布
最新推荐文章于 2024-04-29 20:03:13 发布
阅读量3.7k 收藏 10
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sanjun_done/article/details/107100643
版权

使用场景：将用户刚刚更改的头像或用户名实时在同一页面实现，如下图
在这里插入图片描述

vm.$emit( eventName, […args] )
参数：

  • {string} eventName
  • […args]
    触发当前实例上的事件。附加参数都会传给监听器回调。

1. 子路由中存入数据
在这里插入图片描述
2. 在父路由中绑定子路由传来的数据
在这里插入图片描述
3.处理父路由中传过来的数据
在这里插入图片描述

山菌_done
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue父子组件传值
upStar1的博客
03-01 2万+
记录一下项目中遇到的问题。 因为一个流程对应一种单据，所以每次点击单据详情，应该出现相应的单据内容。在另一个页面，也需要调用这个单据内容。 因为vue不能直接调用弹出框，所以老师把单据内容写成了组件，在另一个页面直接调用这个组件就行。这个功能涉及到了父子组件传值的内容。（其实在本来显示单据内容的页面，只要根据后端传的内容判断显示哪个单据就可以，但是因为在另一个页面也需要调用单据内容，所以写成组件会更方便。由此，如果一个页面或者弹出框，在很多个页面需要用到，可以把这个地方的内容写成组件） ......
vue的组件间（路由间）父子传值
Beam
05-15 4795
父传子-prop 详见官方说明 https://cn.vuejs.org/v2/guide/components-props.html 注意： 为了html的规范，在使用props传值的时候，在父组件引用时变量不用驼峰命名用-连接。参考vue啊element的组件都是-连接的。对应代码如下： // 子组件 props: ['whichData'], // 父组件 建议规范化使用 <my-ic...
VUE—父子组件传值、改值、调用方法。。。。
Poppy_LYT的博客
09-04 2763
VUE—父子路由传值（控制显示隐藏） 方法一： 子路由 <input @click="changed" readonly type="text"> methods: { changed () { this.$emit('changedFn', true) // 参数一：事件名 参数二：传递的值 } } 父路由 <Inp...
vue路由传参的8种方式！！！
最新发布
m0_74830901的博客
04-29 1852
我们在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求，所以，我们需要了解路由传参的几种方式，以下方式同。
vue-router传参的四种方式超详细
热门推荐
qq_42696432的博客
06-21 3万+
vue-router在工作中常用的几种传参方式~
VUE 路由router父子传参的方式(路由传参)
g_hy1994的博客
10-05 3579
VUE 路由父子传参的方式 方案一： getDescribe(id) { // 直接调用router.push实现携带参数的跳转this.router.push 实现携带参数的跳转 this.router.push实现携带参数的跳转this.router.push({ path: /describe/${id}, //路由地址 }) 方案一，需要对应路由配置如下： { path...
vue-router组件父子组件的传值
weixin_51666715的博客
02-28 593
vue-router父子组件的传值 何为父组件 父组件就是当我们在一个组件中去引用另外一个组件的时候,这个时候我们在这个组件是引用组件的父组件 父子组件传值的方式分别为: path 和 query传参 实现的方式是通过router-link 和 to 搭配使用来让我们的使得我们跳转并将我们所传的参数会在跳转后的页面上的网页地址栏中显示，获取方法就是this.$query 代码如下: //父组件 <template> <div> <router-link to="/r
[Vue]子组件与父组件之间传值
weixin_30551963的博客
05-16 115
1.父组件与子组件传值props 1.1定义父组件，父组件传递inputText这个数值给子组件: //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单： <add-widget :msg-val="msg"> //这里必须要用 - 代替驼峰 // HTML 特性是不区分大小写的。所以，当使用的不是字符串模板，camelCase...
vue 父子组件传值的方法
weixin_39888214的博客
05-13 197
一、父传子 1、Prop 向子组件传递数据 //子组件 Vue.component('Child', { props: ['title'], template: '<h3>{{ title }}</h3>' }) //父组件调用 <Child title="My journey with Vue"></Child> 2、$emit监听子组件事件 //子组件 <button v-on:click="$emit('enlarge-t.
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
01-18
看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容，要想默认的在区域显示一个页面内容怎么办？ 自己案例代码： pages/parent.vue 父组件的页面的内容 <!-- 进行切换子页面...
vue2.0组件之间传值、通信的多种方式(干货)
08-28
- **父组件向子组件传值**：使用`props`属性。在父组件中定义要传递的属性，然后在子组件的`props`选项中声明接收这些属性，如`props: ['number']`。传递数据时，直接将属性赋值给子组件标签，如`...
基于Vue中的父子传值问题解决
12-28
接着创建父子组件，父组件Father.vue，子组件Son.vue(随意起名，开心就好)，然后在父组件中引入子组件，创建一个父组件的路由。车门已经焊死了，请继续往下看 1.父传子 Father.vue(用v-bind(简写 : ) 将父组件传的值...
Vue2的router-view中子组件与父组件传值
yuxuan89814的专栏
05-21 4036
子组件与父组件传值是通过在子组件中，定义$emit，向父组件发射一个事件，及带上传的值。父组件监听这个事件，然后调用这个事件的函数，传值是传到这个函数参数中的。 this.$emit('changeActiveStep',3); 事件名：changeActiveStep 传值：3 具体如下： 场景是，app.vue中定义一个展示当前进度的变量， 这个值随着app.vue 中router-view跳转到component1，值表示为第一步,跳转到component2，值表示为第二步 实现为： 1，在
vue组件间（父子、兄弟、跨级组件）通信传值
DOM曼珠沙华的博客
05-21 5363
大体可以分为这几种情况： 父子组件传值 子父组件传值 兄弟组件传值（不相干的两个组件） 跨组件传值 父组件给子组件传值 静态传值 父组件内： <form-test title="element表单"></form-test> 子组件使用props获取： props:['title'], 子组件渲染在页面内： <h3>{{title}}</h3> 最后渲染效果： 动态传值 子组件内的东西与上方的一致，修改父组件内的组件： <form-test
vue 父级路由调用子路由方法及子路由传值给父级路由
weixin_43795169的博客
11-18 6959
1、父级路由调用子路由的方法 子路由中定义了一个getData()方法 methods:{ getData(){ console.log('这是子路由方法 由父级路由触发') } } 在父级路由页面中给router-view加ref属性 <div class="content"> <router-view ref="child"></router-view> </div> 接着调用子路由的getData()方法 mounted(){ thi
props 父子传值 简单的路由传参
qq_43658378的博客
06-22 515
vue props父子互传
Vue父子组件传值
qq_49867247的博客
03-14 2万+
Vue父子组件传值：props / $emit；$parent / children；$ref
vue3实现父子组件相互传值
05-05
在 Vue3 中，可以使用 `props` 和 `emit` 来实现父子组件之间的数据传递。 父组件可以通过 `props` 向子组件传递数据，而子组件可以通过 `$emit` 方法向父组件发送事件，并传递数据。 以下是一个简单的例子： ```html <!-- 父组件 --> <template> <div> <ChildComponent :message="message" @update-message="updateMessage" /> <p>父组件接收到的消息：{{ message }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { data() { return { message: 'Hello, world!' } }, components: { ChildComponent }, methods: { updateMessage(newMessage) { this.message = newMessage } } } </script> ``` ```html <!-- 子组件 --> <template> <div> <p>子组件接收到的消息：{{ message }}</p> <button @click="sendMessage">发送消息到父组件</button> </div> </template> <script> export default { props: { message: { type: String, default: '' } }, methods: { sendMessage() { this.$emit('update-message', 'Hello, Vue3!') } } } </script> ``` 在上面的例子中，父组件向子组件传递了 `message` 属性，子组件可以通过 `props` 接收这个属性并渲染到页面上。同时，子组件中的 `sendMessage` 方法通过 `$emit` 向父组件发送了一个名为 `update-message` 的事件，并传递了一个新的消息内容。父组件中的 `updateMessage` 方法接收到这个事件并更新了 `message` 属性的值，从而实现了父子组件之间的数据传递。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值