vue中组件之间的传值

按照对象分类：

一、父子组件之间的传值

1.使用props和$emit

2.在引入的子组件中使用ref，通过this.$refs.xxx.方法/值来获取子组件中的方法或者值

3.子组件中使用this.$parent来获取父组件中的值或者方法

4.父组件中使用this.$children来获取子组件中的值或者方法

二、兄弟组件中的传值

1.使用eventBus作为中间件，然后使用$emit去抛出事件，使用$on去监听事件

这里要注意一些事项：a.bus.$emit在beforeDestroy中去触发

b.bus.$on 在 created或者mounted中使用，且回调函数使用箭头函数，解决this指向问题

c.在beforeDestroy中使用bus.$off去销毁事件

详细参考点击链接

三、多级组件嵌套传值

1.使用 v-bind = "$attrs" v-on = "$listeners"

详情参考点击链接

2.使用provide和inject

四、多个组件重复使用，整个项目都需要的

1.使用vuex

原文地址：https://www.cnblogs.com/lanhuo666/p/11273128.html

时间： 2024-09-28 10:10:18

vue中组件之间的传值的相关文章

vue父子组件之间的传值

引入组件 父组件 <div> <form-edit></form-edit> </div> import FormEdit from "路径" //引入 export default { name: "HelloWorld", components:{ FormEdit }, data(){ return{ } } } 子组件 <template> <div>{{ change}}</di

Vue组件之间的传值方法

在vue当中有两种组件之间的传值方法,分别是 * 父子组件* 之间的传值和* 非父子组件 *之间的传值方法 父子组件之间的传值方法 父子组件之间的传值分为两种 * 父组件给子组件传值 子组件给父组件之间的传值 父组件给子组件传值方法 // 父 <div id = "app"> <my-content></my-content> </div> // 子 <template id="content"> <

vue 学习五 深入了解components（父子组件之间的传值）

上一章记录了 如何在父组件中向子组件传值,但在实际应用中,往往子组件也要向父组件中传递数据,那么此时我们应该怎么办呢 1.在父组件内使用v-on监听子组件事件,并在子组件中使用$emit传递数据 //父组件 <template> <div id="home"> <com test='12345' test2='1213232111111' @a_even="a_even"></com> //使用v-on监听子组件事件

vue 组件之间的传值

组件之间的传值有三种  1,父组件给子组件传值 ,   2,子组件给父组件传值   3, 非父子组件之间的传值(又叫兄弟组件传值) 1.父组件给子组件传值   (父组件给子组件传值需要通过props) 首先我的页面结构是这样的  child是子组件   father是父组件, 在这里我新建一个父组件  father.vue <template> <div> <div>这是父组件</div> <!-- 使用组件child --> <child

vue.js 组件之间如何实现数据传递？

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文和大家分享的就是vue.js  组件之间传递数据相关内容,一起来看看吧,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册

【转】vue父子组件之间的通信

vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).v

事件总线bus解决兄弟组件之间的传值

原文引用https://www.dazhuanlan.com/2019/08/25/5d625951eff92/ 事件总线bus解决兄弟组件之间的传值 实际运用: 封装一个Bus.js 123 import Vue from 'vue'const Bus = new Vue()export default Bus 在组件调用时引入 组件一: 1234567891011121314 import Bus from './Bus' export default { data() { return {

【vue组件之间互相传值：父传子，子传父】

今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props,然后创建一个名为message的属性 3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值 4.保存修改的文件,查看浏览器 5.我们依然可以对message的值进行v-bind动态绑定 此

vue父子组件之间传值

vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种vue-cli搭建的同理 父组件通过 v-bind:属性名(自定义的) = "要传递的数据" 子组件通过 props:["属性名"]  这个属性名就是父组件传递过来的数据信息 <div id="app"> <mod :abc=&qu