复习加巩固：vue组件间通信、数据传递（父子组件，同级组件）

缺乏、安全感 2022-12-26 11:25 179阅读 0赞

## 一、组件目录结构 ##

*  父组件：app.vue
 *  子组件：page1.vue
 *  子组件：page2.vue

## 二、通信过程介绍 ##

### 1.父组件向子组件传值 ###

1.1在父组件中引入需要通信的子组件

import Page1 from "./components/page1";

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

components: {
        Page1
      }

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

<page1></page1>

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

<page1 :price="price"></page1>
    
    //  此处的price则是传递给子组件的值

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

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

1.6 在子组件中使用该值

<p><span>单价：</span><span>{
       {price}}</span></p>

### 2.子组件向父组件中传值 ###

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

<p><span>单价：</span><span>{
       {price}}</span> <button @click="downPrice">降价1元</button></p>

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

downPrice(count){
                this.$emit('downPrice',count)
      }
    
    // downPrice 是传递给父组件的事件，父组件触发并相应这个方法
    // count 传递给父组件的参数，在父组件中，可以对和这个参数进行相应操作

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

<page1 :price="price" @downPrice="downPrice"></page1>

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

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

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

方法一：

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

<page1 :price="price" @downPrice="downPrice" ref="page1"></page1>

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

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

方法二：

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

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

### 4、子组件调用父组件方法 ###

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

this.$parent.父组件方法

### 5、平级组件通信 ###

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

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;
        });

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关 React组件通信-非父子组件间的通信

文章目录 React非父子组件通信小知识点的补充 Context应用场景 Context相关

系统管理员/ 2023年10月02日 20:52/ 0 赞/ 33 阅读

相关 React组件通信-父子组件间的通信

文章目录 React父子组件通信认识组件嵌套组件通信父传子

柔情只为你懂/ 2023年10月02日 20:52/ 0 赞/ 36 阅读

相关 Vue组件通信（父子组件传值，非父子组件传值）

主要是整理给自己用的一些面试常用题，这里记录一下vue组件间通信几种方式。父组件传值到子组件（父传子）先定义一个子组件，这里我在component文件夹里定义一个c

电玩女神/ 2023年06月23日 02:56/ 0 赞/ 192 阅读

相关复习加巩固：vue组件间通信、数据传递（父子组件，同级组件）

一、组件目录结构父组件：app.vue 子组件：page1.vue 子组件：page2.vue 二、通信过程介绍 1.父组件向子组件传值

缺乏、安全感/ 2022年12月26日 11:25/ 0 赞/ 180 阅读

相关 Vue.js组件之间的通信---父子组件之间传递数据

组件之间的通信父组件向子组件传递数据（子组件调用父组件中的数据） props 父组件向子组件传递方法（子组件调用父组件中的

亦凉/ 2022年12月21日 02:28/ 0 赞/ 255 阅读

相关组件间通信（父子通信）

（1）父->子通信 props down <!DOCTYPE html> <html> <head> <title></title>

╰半夏微凉°/ 2022年06月02日 12:06/ 0 赞/ 352 阅读

相关 vue2.0父子组件间传递数据

关于父子组件之间传递数据其实文档上都说得很明白。但是如果完全不懂的人做计也看不懂，下面是一个小例子，有两个文件 1.parent.vue <template

蔚落/ 2022年06月01日 09:29/ 0 赞/ 247 阅读

相关 Vue父子组件数据传递

父组件向子组件传值,通过props，单项绑定，只能传值给子组件，防止改变父组件的值 1、父组件 <template> <Child :info=

妖狐艹你老母/ 2022年04月27日 23:12/ 0 赞/ 288 阅读

相关 Vue 父子组件间的通信

前言在 Vue 项目中父子组件的通信是非常常见的，最近做项目的时候发现对这方面的知识还不怎么熟练，在这边做一下笔记，系统学习一下吧。 1 父组件传值给子组件 1.1

迈不过友情╰/ 2022年04月08日 11:20/ 0 赞/ 355 阅读

相关 vue父子组件间互相传递数据

vue父子组件间传递参数 1.父传子使用 props 向子组件传递数据。在父组件中定义 hMsg参数，v:bind 绑定childMsg的值为hMsg；子组

心已赠人/ 2021年11月02日 06:58/ 0 赞/ 445 阅读