Vue2组件间通信方式

props、emit

父组件传入属性，子组件通过props接收

子组件$emit向外弹出一个自定义事件, 在父组件中的属性监听事件，同时也能获取子组件传出来的参数

父组件

  <div id="app">
      <p>father{{ counter }}</p>
      <button-counter @increment="fatherIncrement" :counter="counter"></button-counter>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        counter: 0
      },
      methods: {
        fatherIncrement(value) {
          this.counter += value
        }
      },
    });
  </script>

子组件

 Vue.component('button-counter', {
      props: ['counter'],
      template: '<button @click="incrementHandler">child{{ counter }}</button>',
      methods: {
        incrementHandler() {
          this.$emit('increment', 10)
        }
      },
    })

root 、$children

不推荐使用，页面层次发生变化后，就需要重新考虑层级关系，不易于维护。

需要注意 $children 并不保证顺序，也不是响应式的。

// 调用父组件方法
this.$parent.handleParent()
// 获取第一个子组件数据
this.$children[0].msg
// 调用根组件的方法
this.$root.handleRoot()

$ref

1.父组件获取子组件的实例

2.用于操作原生dom元素

<Child ref="child"></Child>
export default {
 mounted(){
 // 调用的子组件Child 的方法
 this.$refs.child.handleChild()
 }
}

provide和inject

常用组件嵌套封装，一个顶层组件的后代组件需要用到顶层组件的数据

祖先向其所有后代传值

可以在父组件定义componentChildren。并把父组件传递下去，让子组件调用addChild方法，以实现父组件获取后代组件

//  顶层组件
export default {
  data() {
    return {
      componentChildren: [],
    };
  },
  provide() {
    return {
      msg: "form comA",
      comA: this,
    };
  },
  methods: {
    addChild(child) {
      this.componentChildren.push(child);
    },
  },
};
//  后代组件
export default {
  inject: ['msg', "comA"]
}

listeners

$attrs可以获取父组件传进来但没有通过props接收的属性

// 父组件
<Child :title="title" :desc="desc" >/>

//  子组件内
<h2>{{title}}</h2>
<p>{{$attrs.desc}}</p>
<script>
export default {
  props: ['title']
}

可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

封装button组件

// button组件
<template>
  <button v-bind="$attrs">click</button>
</template>

// 使用button组件
<Button disabled></Button>

$listeners 会展开父组件的所有监听的事件

//  父组件内引入child组件
<Child @a="handleA" @b="handleB"></Child>
 methods: {
  handleA() {
   console.log("AAAAAAAAAAA");
  },
  handleB() {
   console.log("BBBBBBBBB");
  },
 },

// 子组件内引入获取事件
 methods: {
 getListeners() {
  console.log(this.$listeners);
  // this.$listeners.a 
 },
 },

可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

// button组件
<template>
  <button  v-on="$listeners">click</button>
</template>

// 使用button组件
<Button @click="handleClick"></Button>

EventBus

利用vue实例自带的once、off、$emit、方法实现数据传递。

//创建个新的vue实例作为bus
import Vue from "vue";
const bus = new Vue();
export default bus;

 //组件A，监听init事件
 mounted() {
  bus.$on("init", this.init);
 },
 methods: {
  init(val) {
   console.log("init", val);
  },
}
 //组件B，触发init事件和传递数据
 methods: {
   handleInit() {
     bus.$emit("init",10);
   },
 },

Vuex

全局状态管理
官网：https://vuex.vuejs.org/zh/