vue工程各组件传值大总结

迷南。 2021-08-19 18:17 318阅读 0赞

**目录**

一、父子关系如何界定

二、父to子组件

三、子to父组件

四、非父子（eventBus）

4.1使用前提

4.2 使用流程

4.3 使用大坑

4.4 问题遗留

五、vuex传值（推荐）

--------------------

一个vue工程，涉及到很多页面之间的传值，具体总结如下

# 一、父子关系如何界定 #

要传值先搞清楚组件关系，父子关系如何界面，官网中没有明确说明，个人觉得看template，B组件作为components注册到A.vue，A.vue中template里面有<B></B>,**B组件作为一个标签使用到A组件中**，那么A就是父组件，B就是子组件，如果C组件跟B组件一样，作为A组件template中的一个标签，那么BC就是兄弟组件。

# 二、父to子组件 #

**1、详细步骤**

*  子组件props中定义需要接受父组件的变量getVar

export default{
      //接受父组件值的变量
        props：{
            getVar：{
                type：String,   //指定传入类型的话，如果传入的类型不对，就会警告
                default：false, //不带默认值
              //default：'a',  //带默认值，如果没传值进来，就显示默认值
            }
        }  
    }
    
        chartType: {
          type: String,
          default: "Line" 
        },
        chartOptions: {      
          type: Object,    //传入一个object
          default: () => {
            return {};
          }
        },
        chartData: {
          type: Object,
          default: () => {    //传入一个object，带指定内容的
            return {
              labels: [],
              series: []
            };
          }
        },
        initData:{
            type:Array,
            default:() =>{ return []  }
        }

*  父组件中引入子组件，并给getVar传值

使用方法：**<子组件     ：子组件定义的变量名='父组件传值的变量名'></子组件>**

// 父组件
    <template>
        <div>
            <input type="text" v-model="name">
            
            <child :getVar="name"></child>  //作为标签进来，就是子组件，在子组件中，用:子组件中定义 
                                              的变量名来传值
        </div>
    </template>
    <script>
    import child from "./child";
    export default {
      components: {
        child   //注册进来的组件就是子组件
      },
      data() {
        return {
          name: ""
        };
      }
    };
    </script>

**2、大坑**

子组件接受一次值以后，任父组件传的值怎么变，父组件都不变化了。

**解决办法**：父组件中用一个中间值，页面中绑定这个中间值，watch监听props值的变化，变化后把新的赋值给中间值。

# 三、子to父组件 #

子to父传值是通过方法来传递的，子组件需要传值的地方触发事件来通知父组件需要改变数据。

1、子组件中：

this.$emit("**onChildByValue**", this.childValue);

<template>
        <div>
            子组件:
            <span>{
       {childValue}}</span>
            
            <input type="button" value="点击触发" @click="childClick">
        </div>
    </template>
    <script>
    export default {
      data() {
        return {
          childValue: "我是子组件的数据"
        };
      },
      methods: {
        childClick() {
          // childByValue是在父组件on监听的方法
          // 第二个参数this.childValue是需要传的值
          this.$emit("onChildByValue", this.childValue);
        }
      }
    };
    </script>

2、父组件

<template>
        <div>
            父组件:
            <span>{
       {name}}</span>
            
            <child v-on:onChildByValue="childByValue"></child>
        </div>
    </template>
    <script>
    import child from "./child";
    export default {
      components: {
        child
      },
      data() {
        return {
          name: ""
        };
      },
      methods: {
        childByValue: function(childValue) {
          // childValue就是子组件传过来的值
          this.name = childValue;
        }
      }
    };
    </script>

# 四、非父子（eventBus） #

## 4.1使用前提 ##

使用eventBus的两个组件传值，**两个组件必须完全渲染（即同时是显示状态的）**才能实现数据通信，如果组件A通过路由跳转到组建B，那么这种情况下组件A已经销毁了，组件B才开始渲染，是没办法监听到事件的；还有经常遇到的就是第一次使用时候，组件A渲染了，但是组件B还没开始初始化，这些情况下只能通过Vuex进行传值了。

## 4.2 使用流程 ##

1、创建eventBus.js

import Vue from 'Vue'
    export default new Vue()

2、两个需要通信的组件中引入该JS

import bus from './components/eventBus.js'

3、组件A中传值

//A组件中
    
    bus.$emit('id', 1)

4、组件B中接受值

// 在组件 B 创建的钩子中监听事件
    bus.$on('id', function (id) {
      console.log(id);  //打印出1
    })

## 4.3 使用大坑 ##

如果路由外面没有使用keep-alive的话，会发现随着切换次数的增多，$on()会触发多次，具体原因跟生命周期有关，这个$on不会自动销毁，需要手动销毁参见：

[https://blog.csdn.net/chern1992/article/details/80392465][https_blog.csdn.net_chern1992_article_details_80392465]