记录在vue中的父传子，子传父，兄弟传值之间的通信问题

最新推荐文章于 2024-03-25 13:01:07 发布
最新推荐文章于 2024-03-25 13:01:07 发布
阅读量175 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cookie_bin/article/details/108102575
版权

1.先看看父传子

App.vue是父组件， 被调用的HelloWorld.vue是子组件

父传子：调用子组件的时候直接赋值即可

在这里插入图片描述

被调用的HelloWorld.vue子组件通过props接收并赋值

在这里插入图片描述

这样就能看到效果，在App.vue上看到的效果

在这里插入图片描述

2.再来看子传父

子传父：子组件需要通过this.$emit('事件名称'，'需要传的值') 向父组件发射广播信息

在这里插入图片描述
在这里插入图片描述

通过点击按钮可以看到收到了子组件传来的值

在这里插入图片描述

3.最后看看兄弟传值（子传子）

有三种方式

  1. 大儿子传值到父组件，再通过父组件传值给小儿子
  2. 通过事件总线eventBus进行通信
  3. 通过vuex进行数据共享

这里仅讲通过事件总线eventBus进行通信

  1. 先在components下创建一个子组件About.vue
    在这里插入图片描述
  2. 在App.vue里引入About.vue组件并注册调用
    在这里插入图片描述
  3. 因为需要用到事件总线，所以需要在src/eventBus下创建一个eventBus.js
    在这里插入图片描述
  4. 在需要用到传值的组件里引入eventBus
     import eventBus from "@/eventBus/eventBus"
  5. 我们在HelloWorld.vue组件里面广播出一个信息
    在这里插入图片描述
    6.在About.vue组件中，通过事件总线eventBus监听HelloWorld.vue发出的信息
    在这里插入图片描述
    7.通过页面来看看效果
    未点击状态下：
    还没有点击HelloWorld.vue组件中的按钮
    点击之后的状态：在这里插入图片描述

这就完成了组件与组件之间的通信！

Chovybin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue常用传值方式、父传子、子传父及非父子实例分析
10-15
本文将详细讲解Vue中的四种主要传值方式：父传子、子传父、兄弟组件间的通信以及非父子组件间的通信。 1. **父传子（Props）** - **概念**：父组件向子组件传递数据是通过`props`属性实现的，它允许父组件的数据向...
Vue中父组件向子组件通信的方法
08-30
Vue中父组件向子组件通信的方法 在 Vue 框架中，父组件向子组件通信是一种常见的场景。可以使用 props 将父组件的数据传递给子组件。子组件在接受数据时需要显示声明 props。在本文中，我们将通过一个实例来介绍 ...
Vue组件通信(父传子、子传父、兄弟通信)
亚洲的博客
01-08 2118
一、父传子 首先在父组件的子组件上定义一个属性，在属性上挂载要传输的变量，然后在子组件中通过prop来接收 1、父组件parent.vue <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> </templa
Vue子传父详细教程
m0_62956518的博客
05-05 3万+
子传父通过自定义事件，this.$emit（"自定义方法名1"，需要传的值）进行传值。 本文父组件：shopping.vue 子组件：shoplist.vue 1.第一步，在父组件中引入子组件（父组件内） import shoplist from '../shoplist.vue' 2.在子组件内定义数据（子组件内） data() { return { children:"this is children" };......
vue 父传子 子传父实现方式
weixin_64735754的博客
03-08 1万+
父传子： 主要步骤： 首先在子组件props中创建一个属性，用以接收父组件传过来的值； 然后父组件中引用子组件，并在子组件标签中添加子组件props中创建的属性； 最后把需要传给子组件的值赋给该属性。 理解： 父亲传给儿子东西，儿子在那边用一个碗接，这个碗就是props，因为传的东西不可能只是一个，所以是一个数组，父亲因为要传东西到儿子的碗里，所以要绑定儿子的碗，然后传值 props：properties的简称 prop 只可以从上一级组件传递到下一级组件（父子组件），...
vue子组件向父组件传值的三种方式
热门推荐
bidepanm的博客
04-27 4万+
一、通过父组件给子组件传递函数类型的props实现 父组件： <Child :getChildInfo="getChildInfo"></Child> 子组件： <button @click="sendChildInfo"></button> props: ['getChildInfo'] sendChildInfo() { this.getChildInfo(数据); } 二、通过父组件给子组件绑定自定义事件实现 第一种方式： 父组件： <c
vue--子传父、父传子
weixin_66375317的博客
05-08 4424
vue --子传父 、父传子
Vue的props父传子的示例代码
10-15
在子组件中定义 `props` 时，指定类型有助于在开发过程中进行类型检查，防止传入不符合预期的数据类型。 总结一下，Vue 的 `props` 功能允许父组件向子组件传递数据，这在构建复杂应用时非常有用。通过定义和使用 `...
vue 组件间的通信之子组件向父组件传值的方式
10-15
在Vue中，父组件可以通过在子组件标签上使用`v-bind`指令（简写为`:`)将数据绑定到子组件的属性。例如，在`<com-b :name="name"></com-b>`中，`name`属性被绑定到父组件的`name`数据属性。在子组件内部，我们需要在`...
vue父组件给子组件传值
12-21
下面我们将详细探讨如何在Vue中实现父组件给子组件传值。 1. **Props定义**： 在Vue中，子组件通过props属性接收父组件传递的数据。在子组件的选项对象中，我们需要定义一个props数组，列出所有期望接收的属性名。...
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
10-18
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值，需要的朋友参考下吧
vue子传父
qq_42788117的博客
12-03 93
1.子组件 <template> <div class="testCom"> <input type="text" v-model="message" /> <button @click="click">发送消息给爸爸</button> </div> </template> <script> export default { data() {
vue 父传子，子传父组件的多种方式；父组件直接调用子组件方法；子组件直接调用父组件方法
q1ngqingsky的博客
11-08 5703
//父组件： <user-view ref="view" :dialog-visible="userViewVisible" @close="viewClose" /> methods:{ view(row) { this.$refs.view.setUser(row); this.userViewVisible = true; }, } // 子组件：user-view methods:{ setUse.
vue组件的五种传值方法(父子\兄弟\跨组件)
pckzzy107的博客
08-22 1024
子组件向父组件传数据使用自定义事件， vue 组件提供了一个emit(‘自定义事件名’， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过$emit给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据。// 父组件代码，渲染子组件method:{// 子组件代码。
vue组件通信---父子互传（props，$emit()）
muzidigbig的博客
11-20 3219
一、大纲 在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。 第一步：父传子（props） 第二步：子传父（$emit()） 二、案例 1----props 2----$emit() parent.vue <te...
Vue中的子传父、父传子详细（vue2子传父、父传子，vue3子传父、父传子）
weixin_65793170的博客
03-25 5362
在 语法中，你不需要显式地导出任何东西，因为所有顶层变量、函数和组件都会自动暴露给模板和其他组件。
Vue 中 组件通信 - 子传父（自定义事件）
qq_45803050的博客
07-19 1万+
Vue 中 组件通信 - 子传父（自定义事件） 子传父步骤： 在子组件的 data 里面定义好 要传递的数据 在子组件的模版里面正常使用 该数据 （一般是通过一定的动作，如点击，滑动等，来自定义事件向父组件传递，这里以 click 为例） 在子组件的 methods 里面 定义 this.$emit(‘itemclick’,item)， 将 名字为 itemclick 的自定义事件传给父组件，item 是参数 在父组件使用子组件的时候，利用 v-on ，将接收到的数据传递给自己的事件 @
vue组件通信---子传父(props方式)
zyy_wx的博客
09-24 1166
vue子传父(props方式)
vue中三种方式：子传父数据
富在术数不在劳身,利在势局不在力耕。
12-22 1494
App.vue中代码 ------------------- <template> <div id="app"> <HelloWorld :getson="getson" @getsondata="getson2" ref="Univer"/> <!--this.$ref.helloworld--> </div> </template> <script> import HelloWorld f.
vue2中父传子组件传值
最新发布
04-19
下面是一种常见的父传子组件传值的方式： 1. 在父组件中定义一个数据属性，并将其作为props传递给子组件。例如，在父组件中定义一个名为"message"的数据属性： ```html <child-component :message="message">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值