Vue组件间的传值

最新推荐文章于 2024-05-24 15:48:22 发布
最新推荐文章于 2024-05-24 15:48:22 发布
阅读量390 收藏 3
点赞数
分类专栏： Vue 文章标签： Vue 组件传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_36065997/article/details/82352230
版权

父组件向子组件传值—利用props

这里写图片描述
上述代码定义了一个id=’father’的父组件和的子组件

在子组件的定义中，未出现数据text和方法show，但是最终的展示效果如下所示：

这里写图片描述

利用了props来接受父组件传递给子组件的参数，在子组件里面可以直接使用接受的方法和数据。

子组件向父组件传值—利用refs/emit

法一： $refs

利用ref给子元素设置名称name，注意不能采用name-item这种横线命名方式；
利用this.$refs.name.function获取子元素name里面的function；
这里写图片描述
运行结果：
点击父元素，会将子元素里面的age传递给父元素并显示出来
这里写图片描述

法二： $emit

这里写图片描述
上述代码的展示结果如下：
1、初始状态
这里写图片描述
父组件中age变量定义为0
2、触发事件
点击子组件的内容，首先会触发showrun方法，因此会出现一个弹框，显示showrun方法传递给父组件数据‘我会跑了’
这里写图片描述
因为弹窗会阻止接下来JS代码的运行，所以关闭弹窗之后，会执行showage方法，此时将子组件里面的age数据值传递给了父组件里面的age值
这里写图片描述

兄弟组件传值—利用父元素

先将兄弟的值通过$emit传递给父元素，父元素通过props再传递给另一个兄弟元素
这里写图片描述
点击brother1的内容，会把brother1里面的msg传递给rother2，结果如下图所示：
这里写图片描述

上述代码地址：

优雅1217
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件间传值
PatrickZheng的博客
03-27 477
背景 项目上，前端使用了 Vuejs 框架和ElementUI控件库 A页面通过 $route 打开B页面，同时传入参数 id； B页面将参数读取并保存于变量X； B页面有子组件C，将变量X传给C 现状 parent.vue （B页面） <template> <child :id="X"></child> </temp...
VUE 组件间传值
hey_lie的博客
07-20 876
vue中没有直接的实现方式，最原始的就是，将两个子组件合并到一个父组件中，通过父组件中转传值。父组件中自定义事件，名称为child-event，实际执行方法为parentEvent。这样是数据请求完成后才显示该组件，在该例子中显然不好，会出现空白，然后突然展示。组件A通过$ON接受组件B传递的事件componentB-event，处理消息。组件B通过$ON接受组件A传递的事件componentA-event，处理消息。父子组件传值时，如果数据是异步请求，则在请求耗时中，数据没有展示。...
Vue组件传值的六种方法
最新发布
li826827的博客
05-24 783
父子组件通信: props；ref；兄弟组件通信: eventBus；vuex跨级通信: eventBus；Vuex；
vue组件之间的传值
在路上...Try Fly
04-24 4953
slot标签： 想向封装好结构的组件中插入内容，需要借助<slot></slot> 在组件之中进行关联：如 模板中：<slot name='txt'></slot> 组件调用中：<p slot='txt'></p> 注：如果只有slot上面每一定义name属性，则只能有一个slot<div class='box'> <com> <p slot='txt'></p>
vue中组件间传值的方法？
weixin_44759289的博客
03-05 180
vue中组件间传值是通过props来传递的，他需要使用属性绑定的语法，把要从VM身上传递过来的数据，绑定到组件身上，这个绑定的代码要写在HTML中。具体案例如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...
组件间传值
qq_45039822的博客
10-17 760
专门在 Vue 中实现集中式（数据） 管理的一个 Vue 插件，对 Vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通信方式，且适用于任意组件间的通信。在项目中我们要修改state状态的时候，我们需要使用this.$store.dispatch来触发actions中定义的方法，在actions里面定义的方法通过commit来调用mutations定义的方法来改变state状态。pinia是最新一代的轻量级状态管理插件，一个全新的用于 Vue 的状态管理库。
Vue 组件间传值及事件触发Demo
09-07
总结：Vue组件间传值和事件触发是构建可复用、可维护应用的基础。通过`props`、`v-model`、`$emit`、`Vuex`等手段，我们可以有效地管理组件间的数据流动，同时通过自定义事件和事件回调实现组件间的交互。理解并熟练...
解决vue组件props传值对象获取不到的问题
10-16
在使用Vue.js框架进行前端开发时，组件间的数据传递是一个常见的需求。Vue提供了props机制来实现父子组件间...本文所提供的解决方案，对那些在Vue组件间传递复杂数据结构时遇到类似问题的开发者具有参考和借鉴的价值。
vue组件间的传值-小案例
07-06
以上就是Vue组件间通信的基本方式。理解并熟练运用这些技巧，能够帮助开发者更好地组织和管理复杂的Vue应用。在实际项目中，还可能涉及更复杂的通信场景，如使用Vuex状态管理库，或者通过事件总线（Event Bus）进行...
深入理解Vue 组件之间传值
10-18
本文将深入探讨Vue组件间的数据传递，包括父组件向子组件传递数据、子组件向父组件传递数据以及子组件之间的间接通信。 一、父组件向子组件传递数据 Vue中，最常用的数据传递方式是通过props（属性）。在子组件中...
vue组件通信传值操作示例
10-17
本篇将详细讲解 Vue 组件间通信的两种常见方式：父子组件通信和兄弟组件通信。 **1. 父子组件通信** 在 Vue 中，父子组件通信主要通过以下几种方式： - **Props 向下传递数据**：父组件可以通过 `props` 将数据...
组件之间的传值
zd7id的博客
04-18 3768
父子组件传值 解决方案：自定义属性 语法结构：子组件中通过props选项接受自定义属性 ① 编辑子组件，添加自定义属性 // 子组件代码 <template> <p> data中的数据：{{ msg }} </p> <p> 自定义属性数据：{{ dataFromParent }} // props中的数据 </p> </template> <script>
组件之间传值
weixin_30852451的博客
01-24 50
1、父组件传值给子组件 　　父组件 <template> <div> 父组件: <input type="text" v-model="name"> <!-- 引入子组件 --> <child :inputName="name"></child> </div&g...
简单教你React父子组件间平级组件间传值
hsany330的专栏
05-29 169
1.父组件对子组件传值利用props属性传值 class Component extends React.Component { constructor (props) { super(props); } render() { return ( <div> <h1>I am {th...
React 组件内、组件间传值
dk123sw的博客
05-10 2594
这里组件间参数传递只介绍利用回调传递（ref不介绍）即子组件向父组件传值。（父组件向子组件传值用props,层级较深或无关联组件间传参即需要全局数据管理参考react-redux、MobX等） 组件内（无默认参值和需要默认参值情况） class Demo extends Component{ constructor(props){ su...
Vue 组件之间传值
cherry_zhang18的博客
01-17 2844
Vue 组件之间传值 一、父组件向子组件传递数据 在 Vue 中，可以使用 props 向子组件传递数据。   子组件部分： 这是 header.vue 的 HTML 部分，logo 是在 data 中定义的变量。 如果需要从父组件获取 logo 的值，就需要使用 props: ['logo'] 在 props 中添加了元素之后，就不需要在 data 中再添加
vue 组件之间的传值
AsBefore麦小兜
04-01 755
1，props、事件$emit 父组件向子组件传值（props） 2、$emit、$on （Bus） 通过新建Vue实例（Bus）作为中央事件总线（事件中心），用它来触发事件($emit)和监听事件($on),巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。 3，$attrs、$listeners（属性，事件） 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中...
【VUE】组件间传值
主、Lantu的博客
04-27 175
父-子之间：父组件以属性的形式绑定值到子组件中，子组件使用props接收。 子-父之间：子组件使用$emit()触发自定义事件，父组件使用v-on监听事件。 兄弟之间：使用事件总线eventBus。首先var hub = new Vue()创建一个事件总线实例，数据传送方通过一个事件触发$emit(方法，参数)，数据接收方通过mounted(){}挂载实例中触发hub.$on()方法名，销毁事件使用hub.$off()。 父子组件传值 <div id="app"> <div.
vue组件props传值
08-15
Vue组件的props用于从父组件向子组件传递数据。通过props，父组件可以将数据传递给子组件，并在子组件中使用这些数据。下面是一个示例： 父组件： ```html <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { parentMessage: 'Hello from parent component', }; }, components: { ChildComponent, }, }; </script> ``` 子组件： ```html <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: { message: { type: String, required: true, }, }, }; </script> ``` 在上述示例中，父组件通过`:message="parentMessage"`将`parentMessage`这个数据传递给了子组件。子组件通过`props`定义了一个名为`message`的属性，并指定了其类型为字符串，并且设置为必需的。在子组件的模板中，可以通过`{{ message }}`来访问该属性的值。 这样，父组件的`parentMessage`就会被传递给子组件，并在子组件中显示出来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值