vue组件的传值父传子、子传父、子传子

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

父传子

1、首先要创建子组件，在src/components/文件夹下新建一个Child.vue。
2、然后就如下图所示：
在这里插入图片描述

3、在父组件（app.vue）中传入子组件child，并赋值。

子传父

1、首先也是新建一个组件。
2、然后在方法中使用$emit函数传递，第一个参数为监听的事件，第二个参数为要传递的值。
3、在组件中还要使用传递的事件进行监听，监听到后调用函数fn，最后就是接收参数。

子传子

可以借用公共父元素。子组件A this.$emit(“eventName”, data) 触发事件，父组件监听事件，更改父组件 data , 通过Props 传值到子组件B,子组件B watch Props（注意不是watch 子组件B自身data）。

梦迹karry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue子传子
xianyaono1的博客
07-23 787
父子组件传值的问题，前面已经讲过，不再叙述，这里来说一种非父子组件的传值。 vue官网指出，可以使用一个空vue实例作为事件中央线！ 也就是说 非父子组件之间的通信，必须要有公共的实例（可以是空的），才能使用 $emit 获取 $on 的数据参数，实现组件通信 。 比如说： 公共实例文件bus.js，作为公共数控中央总线 import Vue from “vue”; export default new Vue(); 第一个组件 first.vue import Bus from ‘…/bus.js’; e
vue父组件给子组件传值
12-21
vue父组件给子组件传值
vue--子传父、父传子
weixin_66375317的博客
05-08 4316
vue --子传父 、父传子
Vue中的子传父、父传子详细（vue2子传父、父传子，vue3子传父、父传子）
最新发布
weixin_65793170的博客
03-25 2303
在 语法中，你不需要显式地导出任何东西，因为所有顶层变量、函数和组件都会自动暴露给模板和其他组件。
vue中的子传父和父传子
qq_51805824的博客
07-06 3758
vue中的子传父、父传子详细步骤
vue的三种传值方式：父传子，子传父，子传子
热门推荐
qq_44497296的博客
07-23 1万+
vue 不同组件间传值方式 1 父传子 2 子传父 3 非父子传值 1.父组件向子组件进行传值(父传子) 父组件： <div> <input type="text" v-model="name"> <!-- 引入子组件 --> <child :inputName="name"></child> </div> <script> import child from './child' export defa
Vue组件通信：父传子、子传父、跨组件通信
SunFlower914的博客
10-22 3000
Vue中的组件通信：父传子、子传父、跨组件通信
Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)
qq_41497443的博客
02-28 7421
Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)
vue 子组件与子组件之间传参
warrah 南极狼
12-22 4002
封装可以让整体程序看起来很优雅，但有些问题需要解决，当然这些问题解决之后，开发效率自然就上去了，我的目标就是高效，然后能准点下班。靠时间换取金钱，意义不大。 子组件与子组件之间是不能直接传值的，需要凭借父组件，这个也非常容易理解。 1 子组件向父组件传参 查询条件子组件，显示格局条件，如果超过8个，则显示下拉菜单， 子组件通过this.$emit("addCond",item)传参，即子组件可以使用 $emit 触发父组件的自定义事件 <template> <div>
vue 子组件向父组件传值方法
08-27
下面小编就为大家分享一篇vue 子组件向父组件传值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-子父组件传值源代码
06-29
一个自己搭建的项目，简单易学，包括子传父和父传子实例，也可看源码详情请见博客链接：https://blog.csdn.net/weixin_39332529/article/details/106985173
vue 组件间的通信之子组件向父组件传值的方式
10-15
主要介绍了vue 组件间的通信之子组件向父组件传值的方式总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue实现的父组件向子组件传值功能示例
10-17
主要介绍了Vue实现的父组件向子组件传值功能,结合完整实例形式简单分析了vue.js组件传值的相关操作技巧,需要的朋友可以参考下
组件间传值（子传子）
seventeen0526的博客
10-12 133
组件间传值vuex（子传子） 不同组件间（非父子之间）如何实现数据的传递以及数据的联动呢？这里我们将用到vuex进行数据联动 vuex是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 而状
Vue组件通信(父传子、子传父、兄弟通信)
田兴的博客
12-20 1万+
一.父组件传到子组件 1 . 父组件parent.vue代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son psMsg="我是你爸爸"></son> <!-- 子组件绑定psMsg变量--> </d...
vue2入门----父传子/子传父/兄弟相传
python_web全栈
02-08 3420
0. vue数据传送介绍 a. 想在一个组件里面，引用另一个组件的数据 b. 可以用vuex或者本文写的三方法 c. 规律：父拿的都是key，子拿的是数据/函数 一.父传子 1. 在需要使用父组件值的标签处，添加一个自定义属性 <!-- 1--> <Header :father_son="cart_length"></Header> 2. 在父组件中赋值 cart_length: 12, 3. 在子组件中写一个props // 父传子 ..
vue的传值（子传父、父传子）
qq_44718358的博客
07-23 684
一、父传子 方法：父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，可以使用 props 向子组件传递数据。 子组件代码如下: <template> <div id="container"> {{msg}} </div> </template> <script> export default { data() { return {}; }, props:
如何实现组件之间的通信（父传子，子传父，兄弟组件互传）
qq_45942606的博客
12-15 8688
一、父传子 1.父传子通用的方法就是借助props这个属性 （1）如下图我创建了一个Dom组件，并将它引入到父组件App.vue中 (2)下面我在父组件定义一个变量msg并赋值，然后通过在子组件上写上:msg='msg’的形式，将值传给子组件 (3)在子组件中通过props属性接收父组件传过来的值,获取后并将值赋值给子组件中的变量name 在页面中可以看到如下效果 二、子传父 1、方法一(通过props和回调函数形式) (1)我在父组件创建一个方法dom通过在子组件上加入:dom='dom’的形式将
Vue2父传子、子传父和兄弟间互传
qq_65715980的博客
08-08 1617
Vue2父传子、子传父和兄弟间互传
vue2组件传值子传父
08-30
在Vue2中，子组件向父组件传递值可以使用事件机制。下面是一个简单的示例： 1. 在子组件中，使用`$emit`方法触发一个自定义事件，并且将需要传递给父组件的值作为参数传递： ```javascript // 子组件 <template> <button @click="passValue">传递值给父组件</button> </template> <script> export default { methods: { passValue() { this.$emit('value', '这是传递给父组件的值'); } } } </script> ``` 2. 在父组件中，使用`v-on`指令监听子组件触发的自定义事件，并在对应的方法中接收传递过来的值： ```javascript // 父组件 <template> <div> <p>从子组件接收的值：{{ receivedValue }}</p> <child-component @value="handleValue"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { receivedValue: '' } }, methods: { handleValue(value) { this.receivedValue = value; } } } </script> ``` 在上述示例中，子组件通过`$emit`方法触发了一个名为`value`的自定义事件，并传递了一个字符串作为参数。父组件中通过`v-on`指令监听到了这个自定义事件，并在对应的方法中接收到了传递过来的值，然后将其赋值给`receivedValue`变量。最后，在父组件的模板中显示了接收到的值。 这样，子组件就成功地将值传递给了父组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值