vue组件间传值的方式

最新推荐文章于 2024-05-29 18:55:00 发布
最新推荐文章于 2024-05-29 18:55:00 发布
阅读量807 收藏
点赞数 2
分类专栏： vue 文章标签： vue.js 面试 组件化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45928378/article/details/121664014
版权

请添加图片描述
谈到vue，肯定离不开vue组件之间传值，组件间传值主要分为父子组件传值，兄弟组件传值，任意组件间传值，通过这篇文章总结一下vue组件之间传值的几个方式。

1、父子组件之间传值

父传子
（1）props和attrs

父组件Parent

<template>
    <div>
        <Child1 :msgProps="msgProps" :msgAttrs="msgAttrs"/>
    </div>
</template>

<script>
import Child1 from './Child1.vue'

export default {
    components: { Child1 },
    data() {
        return {
            msgProps: "我是用props接收的",
            msgAttrs: "我是没有用props接收传的值",
        }
    },
}
</script>

子组件Child1

<template>
  <div>
      <p>{{msgProps}}</p>
      <p>{{$attrs.msgAttrs}}</p>
  </div>
</template>

<script>
export default {
    props: {
        msgProps: {
            type: String,
            default: "我是默认的"
        }
    },
}
</script>

父组件向子组件传值的时候如果子组件中在props中声明接收了，则在子组件中可以直接使用，如果没有声明接收则传递的值是存储在子组件实例的$attrs（Object）属性上的，需要通过 $attrs去获值。

（2）$parent

父组件Parent

<template>
    <div>
        <Child1/>
    </div>
</template>

<script>
import Child1 from './Child1.vue'

export default {
    components: { Child1},
    data() {
        return {
            msgChildren: "我是通过$children获取的值"
        }
    },
}
</script>

<style>

</style>

子组件Child1

<template>
  <div>
      <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            msg: ""
        }
    },
    created() {
        this.msg = this.$parent.msgChildren
    }
}
</script>

子组件的实例上有个 $parent属性，上面存储着父组件的一些信息，可以同过 $parent获取父组件中的值，甚至还可以调用父组件中的方法，下面介绍的兄弟组件间的传值就是利用这个特性进行兄弟组件间传值的。

（3）provide/inject

父组件Parent

<template>
    <div>
        <Child1/>
    </div>
</template>

<script>
import Child1 from './Child1.vue'

export default {
    components: { Child1},
    provide(){
        return{
            msg: this.msg
        }
    },
    data() {
        return {
            msg: "通过provide传值"
        }
    },
}
</script>

子组件Child1

<template>
  <div>
      <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
    inject: ["msg"],
    data() {
        return {
            
        }
    },
}
</script>

把provide/inject放在这个地方有些不合适，因为provide/inject主要是用来祖先组件向子孙组件传值的，只要在祖先组件中使用provide提供依赖，不管多深层，只要是该祖先组件的子孙组件都可已通过inject接收。

子传父
(1) $emit

子组件Child1：

<template>
  <div>
      <p>我是child1</p>
      <button @click="toParent">点我传值给父组件</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            child1: "我是child1传给parent的值"
        }
    },
    methods: {
        toParent() {
            this.$emit("toParent", this.child1)
        }
    }
}
</script>

父组件Parent：

<template>
    <div>
        <p>我是parent组件</p>
        <Child1 @toParent="getParent"/>
    </div>
</template>

<script>
import Child1 from './Child1.vue'
import Child2 from "./Child2.vue"

export default {
    components: { Child1, Child2  },
    data() {
        return {
        	msg: ""
        }
    },
    methods: {
        getParent(data) {
            this.msg = data; //将子组件传来的值赋值给msg
        }
    }
}
</script>

子组件可以使用 $emit 触发父组件的自定义事件，所以子组件可以使用 $emit像父组件传值。

（2）$children

子组件Child1

<template>
  <div>
      <p>我是child1</p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            child1: "我是child1"
        }
    },
}
</script>

子组件Child2:

<template>
  <div>
    <p>我是child2</p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            child2: "我是child2"
        }
    },
    methods: {
        getChild2() {
            console.log(this.child2)
        }
    }
}
</script>

父组件Parent：

<template>
    <div>
        <p>我是parent组件</p>
        <child1/>
        <child2/>
        <button @click="getData">获取子组件的值</button>
        <button @click="clickChild2">触发子组件Child2中的方法</button>
    </div>
</template>

<script>
import Child1 from './Child1.vue'
import Child2 from "./Child2.vue"

export default {
    components: { Child1, Child2  },
    methods: {
        getData() {
            console.log(this.$children[0].child1); //输出"我是child1"
            console.log(this.$children[1].child2); 输出"我是child1"
        },
        clickChild2() {
            this.$children[1].getChild2();
        }
    }
}
</script>

组件实例上有$children属性，如果输出 $children你会发现返回的是一个由当前组件子组件实例组成数组，所以找到子组件在当前组件 $Children中的位置，就可以在当前组件中访问子组件中的数据，还可以调用子组件中的方法。

（3）ref

子组件Child2：

<template>
  <div>
    <p>我是child2</p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            child2: "我是child2"
        }
    },
    methods: {
        getChild2() {
            console.log(this.child2)
        }
    }
}
</script>

父组件Parent

<template>
    <div>
        <p>我是parent组件</p>
        <child2 ref="child2"/>
        <button @click="getData">获取子组件的值</button>
        <button @click="clickChild2">触发子组件Child2中的方法</button>
    </div>
</template>

<script>
import Child1 from './Child1.vue'
import Child2 from "./Child2.vue"

export default {
    components: { Child1, Child2  },
    methods: {
        getData() {
            console.log(this.$refs.child2.child2); 输出"我是child1"
        },
        clickChild2() {
            this.$refs.child2.getChild2();
        }
    }
}
</script>

在父组件中给子组件添加ref属性，然后通过$refs.来获取当前子元素的实例，所以通过ref也可以在父组件中访问子组件中的数据，还可以调用子组件中的方法。

2、兄弟组件之间的传值

(1）EventBus（事件总线）

新建一个 js 文件

import Vue from 'vue'
export default new Vue;

main.js中引入该文件

import eventBus from './utils/eventBus'
Vue.prototype.eventBus = eventBus;

Child1组件

<template>
  <div>
      <p>我是child1</p>
      <button @click="send">eventBus传值</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            child1: "我是child1"
        }
    },
    methods: {
        send() {
            this.eventBus.$emit("eventBusName", this.child1);
        }
    }
}
</script>

Child2组件

<template>
  <div>
    <p>我是child2</p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            child2: "我是child2"
        }
    },
    mounted() {
        this.eventBus.$on('eventBusName', (val) => {　
            console.log("这个是用eventBus传的值："+val)
        })
    },
    beforeDestroy() {
    //销毁监听事件
        this.$bus.off("addProduct");
    }
}
</script>

EventBus实现组件间的传值，主要就是通过$emit派发事件，然后通过 $on监听事件，有一点需要注意的是在订阅事件的组件里，一定要在组件销毁之前把监听事件也手动销毁一下。如果不销毁，会累积多次创建监听事件，一旦在派发事件组件里触发了事件，监听事件组件就会执行多次事件。

（2）$parent

子组件Child1：

<template>
  <div>
      <p>我是child1</p>
      <button @click="send">通过$parent传值</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            child1: "我是child1"
        }
    },
    methods: {
        send() {
            this.$parent.$emit("foo", this.child1);
        }
    }
}
</script>

子组件Child2：

<template>
  <div>
    <p>我是child2</p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            child2: "我是child2"
        }
    },
    mounted() {
        this.$parent.$on("foo", val => {
            console.log(val)
        })
    },
}
</script>

父组件Parent

<template>
    <div>
        <p>我是parent组件</p>
        <child1/>
        <child2/>
    </div>
</template>

<script>
import Child1 from './Child1.vue'
import Child2 from "./Child2.vue"

export default {
    components: { Child1, Child2  },
}
</script>

$parent实现兄弟组件之间的传值主要是依靠兄弟组件的共同父组件，通过 $emit， $on实现事件的派发和监听。

（3）$root

$root原理和 $parent是一样的，只不过 $parent是依靠共同的父组件实现事件的派发监听， $root是通过共同的根组件实现事件的派发和监听。用法就是把 $parent换成 $root就行，这边就不用代码演示了。

任意组件传值

（1）vuex

vuex可以实现任意组件之间的通信，内容比较多，就不过介绍了。

vue组件间的传值就总结到这了，如果有什么不对的地方欢迎指正。😎

小荣啊啊
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3组件通信的方式 父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库
qq_46030883的博客
11-17 3792
组件监听的方法上面总共演示了三类。开发中还有一些vuex，localStorage、sessionStorage都是可以进行任意组件的通信。现在就先写到着，后续还会进行补充！！
vue+antdesign模态框实现父子组件之间传值
weixin_34202952的博客
05-20 6730
2019独角兽企业重金招聘Python工程师标准>>> ...
AntV X6结合Vue组件渲染节点，并与节点组件进行双向的数据交互
南七小僧的学海无涯
05-28 2754
项目使用.0 + Element-ui 框架，在开发流程功能时自定义节点，为实现稍复杂的样式以及操作交互，使用 markup + attrs的方式的话，比较麻烦，且难以结合使用 Element-ui的交互组件，因此换成结合 Vue组件渲染方式注册自定义节点（官方文档相对简单了点，老报错，搞了老半天，嘤嘤嘤）
Vue2.0+AntvX6—节点 Node
ZMN0057的博客
08-22 1960
Vue2.0+AntvX6—节点 Node
第十九节:带你梳理Vue2: 父组件向子组件传参(props传参)
最新发布
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-29 1825
本章主要用于介绍组件嵌套,以及嵌套形成的父组件向子组件传参.子组件如何通过pops 接收父组件数据, 以及接收数据处理详情
Vue - 父组件向子组件传值（ref）
技术共享，共同进步！
06-27 6747
父组件向子组件传值（ref)
vue中利用ref实现更灵活的子向父传值
zxdznyy的博客
01-20 5538
目前我们熟知的子向父传值有两种方式： 一种是在父组件中定义函数，然后将函数利用props传给子组件，子组件调用时父组件可以收到子组件的参数；另一种利用自定义事件，给子组件在父组件中绑定一个自定义事件，子组件利用$emit方式触发该自定义事件时可以将数据传给父亲。今天介绍的是通过ref的方法实现子组件传值给父组件。这种方式比前两种方式用起来更加灵活。Vue组件之间的数据共享讲解Vue中ref引用操作DOM元素其中，第一篇文章中有涉及到子向父传值的传统方式。我们在学传统的子向父传值时，涉及到了自定义事件。
vue+antd 父子组件如何传递参数
XIAOYAN_v587的博客
07-15 816
vue+antd 父子组件如何传递参数或者是从当前组件如何向另一个组件传递参数，在这里我们使用props属性。
Vue 组件间传值及事件触发Demo
09-07
1. `props` 下传：父组件向子组件传递数据是最常见的传值方式，通过在子组件定义`props`属性接收父组件传递的值。例如： ```html <!-- 父组件 --> <child-component :parent-value="valueFromParent"></child-...
解决vue组件props传值对象获取不到的问题
10-16
主要介绍了vue组件props传值,对象获取不到的问题,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
深入理解Vue 组件之间传值
10-18
本文将深入探讨Vue组件间的数据传递，包括父组件向子组件传递数据、子组件向父组件传递数据以及子组件之间的间接通信。 一、父组件向子组件传递数据 Vue中，最常用的数据传递方式是通过props（属性）。在子组件中...
vue组件间的传值-小案例
07-06
以上就是Vue组件间通信的基本方式。理解并熟练运用这些技巧，能够帮助开发者更好地组织和管理复杂的Vue应用。在实际项目中，还可能涉及更复杂的通信场景，如使用Vuex状态管理库，或者通过事件总线（Event Bus）进行...
vue组件通信传值操作示例
10-17
本篇将详细讲解 Vue 组件间通信的两种常见方式：父子组件通信和兄弟组件通信。 **1. 父子组件通信** 在 Vue 中，父子组件通信主要通过以下几种方式： - **Props 向下传递数据**：父组件可以通过 `props` 将数据...
vue中组件之间传值的六种方式（完整版）
热门推荐
m0_62876802的博客
07-14 2万+
  组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。  针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了 vue 组件间通信的几种方式，如 、、vuex、、 和 ，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。  本文的代码请猛戳
关于Vue父子组件传值（prop）那些事儿
yang_amy的博客
12-02 1047
今天解决了一个父组件给子组件传值的问题，简单概述下就是子组件打印出的父组件传过来的值为空，以及加了watch监听传值改变之后表单界面不显示数据的问题。（本文涉及到vue以及ant-design表单） 首先，父组件传值给子组件，子组件打印出的穿过来的数据为空。利用watch来监听传过来值的变化。 父组件：父组件中定义 modalData：{} （定义传递的值为一个对象） 子组件： ...
Vue父子组件传值$parent , ref,$refs，props大总结
ayksy468284的博客
08-11 1681
子组件： <template> <div class="child"> <slot name='meiyong'></slot> <p >我是子组件哟 {{num}} {{ttttt}} {{nike}} 这是我独有的----->{{isChi}} </p> ...
Vue 组件之间传值的几种方式 及 $emit update 和 .sync 修饰符用法
iuvc的博客
01-10 3310
在我们日常使用 Vue 构建项目，开发工作中，不可避免的会遇上不同组件之间传值的需求，以下我会一一介绍Vue 组件之间传值的几种方式 及 $emit update 和 .sync 修饰符用法。
ddddttt
fenzu13879的博客
08-22 238
<template> <div class="editable-cell"> <div v-if="editable" class="editable-cell-input-wrapper"> <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon type="check" ...
vue2组件之间传值（数据共享）
cn33333的博客
11-09 5388
父组件中使用子组件时，直接绑定属性，将要传递的值通过该属性传递给子组件。
vue组件之间传值的最全面解释
06-01
Vue组件之间传值是Vue框架中的一个重要功能，它允许不同的组件之间共享数据，实现数据的传递和交互。下面是Vue组件之间传值的最全面解释...以上是Vue组件之间传值的最全面解释，需要根据具体的场景选择不同的传值方式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值