vue组件间通信、数据传递（父子组件，同级组件）

tunny 发布于2019-08-01 17:58 / 3046人阅读

总结一下对vue组件通信的理解和使用。

一、组件目录结构

父组件：app.vue

子组件：page1.vue

子组件：page2.vue

父组件 app.vue

子组件 page1.vue

子组件 page2.vue

二、通信过程介绍 1.父组件向子组件传值 1.1在父组件中引入需要通信的子组件

import Page1 from "./components/page1";

1.2 在父组件的components中注册该子组件

components: {
    Page1
  }

1.3 在父组件的template中使用子组件

1.4 将需要传递给子组件的值通过v-bind(如果传递的是固定值，则不需要v-bind，直接属性名，属性值传递即可)。



//  此处的price则是传递给子组件的值

1.5 在对应的子组件中，通过props属性接收传递过来的值

props:{
        price:{
            type:String,
            default:""
        }
  }

1.6 在子组件中使用该值

单价：{{price}}

2.子组件向父组件中传值 2.1 在page1.vue中，通过触发子组件的方法(这里是自定义的downPrice方法),

 单价：{{price}}

2.2 在子组件的methods的downPrice中，通过this.$emit(),将事件和参数传递给父组件

downPrice(count){
            this.$emit("downPrice",count)
  }

// downPrice 是传递给父组件的事件，父组件触发并相应这个方法
// count 传递给父组件的参数，在父组件中，可以对和这个参数进行相应操作

2.3 在父组件中接受子组件传递的事件downPrice和数据

2.4 父组件对接收到的事件和数据做出响应

downPrice(count) {
      this.price = (this.price - 1).toString();
      // this.price = (this.price - count).toString();
    }

3、父组件调用子组件方法

方法一：

3.1 在使用子组件时，给子组件加一个ref引用

3.2 父组件通过this.$refs即可找到该子组件，也可以操作子组件的方法

this.$refs.page1.子组件方法

打印出获取到的子组件信息：

方法二：

3.3 通过$children,可以获取到所有子组件的集合

this.$children[0].某个方法

4、子组件调用父组件方法 4.1 通过 $parent可以找到父组件，进而调用其方法

this.$parent.父组件方法

打印出的父组件信息

5、平级组件通信

同级组件不能直接传值，需要一个中间桥梁，可以先将数据传递给公共的父组件，然后父组件再将数据传递给需要的子组件。

5.1 定义一个公共文件 eventBus.js

代码很简单(就2句)，只是创建一个空的vue实例

import Vue from "vue"
export default new Vue()

5.2 在需要通信的同级组件中分别引入eventBus.js文件

import bus from  "../eventBus.js"

5.3 在page1.vue中，通过$emit将事件和参数传递给page2.vue

price(newPrice){
          bus.$emit("priceChange",newPrice,this.count) 
}

5.4 在page2.vue 中，通过$on接收接收参数和相应事件

bus.$on("priceChange", (price, count) => {
      this.balance = this.totalMoney - price * count;
    });

一般大型的项目，推荐使用Vuex来管理组件之间的通信

如果对道友你有帮助，请收藏和点赞，如果觉得有问题，欢迎留言指出，demo查看

云服务器 GPU云服务器 vue父子组件通讯父子组件通信父子组件父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51495.html

vue组件间通信、数据传递（父子组件，同级组件）

总结一下对vue组件通信的理解和使用。一、组件目录结构父组件：app.vue 子组件：page1.vue 子组件：page2.vue 父组件 app.vue 请输入单价: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

Harpsichord1207 2019-08-21 17:28 评论0 收藏0
Vue 组件间通信方式

摘要：本身提供哪几种通信方式首先灵感源于，支持双向绑定，本质还是单向数据流。跟一样，组件间最基本的数据流是通过向子组件传递数据。但是在却很少使用，因为组件可以自定义事件，即后面的组件间通信方式其实就是订阅发布模式。例子是在 jsrun.net 平台编写，不支持移动端平台，所以本文建议在 PC 端进行阅读。 Vue 是数据驱动的视图框架，那么组件间的数据通信是必然的事情，那么组件间如何进行数...

hss01248 2019-08-26 13:54 评论0 收藏0
vue父子组件间通信

摘要：为此可以使用为子组件指定一个索引。访问子组件当和一起使用时，是一个数组或对象，包含相应的子组件。父子通信目前有四种方式： 1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件： //这里必须要用 - 代替驼峰data(){ return { msg: [1,2,3] };} 子组件通过props来接收数据:方式1：props: [childMs...

617035918 2019-08-23 11:51 评论0 收藏0
vue组件通信全面总结

摘要：当一个组件没有声明任何时，这里会包含所有父作用域的绑定和除外，并且可以通过传入内部组件在创建高级别的组件时非常有用。写在前面组件间的通信是是实际开发中非常常用的一环，如何使用对项目整体设计、开发、规范都有很实际的的作用，我在项目开发中对此深有体会，总结下vue组件间通信的几种方式，讨论下各自的使用场景文章对相关场景预览父->子组件间的数据传递子->父组件间的数据传递兄弟...

余学文 2019-08-23 12:16 评论0 收藏0
vue中8种组件通信方式, 值得收藏!

摘要：一父组件通过的方式向子组件传递数据，而通过子组件可以向父组件通信。而且只读，不可被修改，所有修改都会失效并警告。之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样...

BicycleWarrior 2019-08-26 10:44 评论0 收藏0