vue工程各组件传值大总结

目录

一、父子关系如何界定

二、父to子组件

三、子to父组件

四、非父子（eventBus）

4.1使用前提

4.2 使用流程

4.3 使用大坑

4.4 问题遗留

五、vuex传值（推荐）

六、ref传值

---

---

一个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="