本文主要解决vue组件之间的通信问题

Prop 向下传递，事件向上传递

Prop

（主要用于父组件向子组件下发数据）

1. 子组件中显式地用 props选项声明它预期的数据：

// 子组件使用数据
<a href="/" :class="navActive === 'index' ? 'active' : ''">首页</a>

// props声明
export default {
  data() { ... },
  props: ['navActive', 'isZjrc']
  ...
}

2. 父组件中传入数据

// 传入静态数据
<header-nav navActive="index"></header-nav>

// 传入动态值
<header-nav :navActive="navClassname"></header-nav>

事件

（主要用于子组件给父组件发送数据）

父子组件通信

1. 在子组件中触发父组件的事件

<button @click="toParent">传值</button>

...
export default {
  data() { ... },
  methods: {
       toParent() {
          this.$emit('childToParentMsg', '子组件向父组件传值')
       }
  }
}

2. 在父组件中监听事件

<header-nav navActive="index" @childToParentMsg="showMsg"></header-nav>
<h1>{{childMsg}}</h1>

// 事件绑定
export default {
    data() {
      return {
        childMsg: ''
      }
    },
    components: {
      HeaderNav
    },
    methods: {
      showMsg(msg) {
        this.childMsg = msg
      }
    }
}

非父子组件通信

1. 在组件A中监听事件

export default {
    mounted() {
        this.$on("showDialog", id => {
          this.showDialog(id);
        });
    }
}

2. 在组件B中触发A的事件

<apply-invoice ref="invoiceDialog"></apply-invoice>

export default {
    mounted() {
        this.$refs["invoiceDialog"].$emit("showDialog",this.customerId);
    }
}