超实用vue中组件间通信的6种方式(最新推荐)

Vue是一个组件化的框架，组件间的通信是非常重要的部分。本文总结了6种超实用的Vue组件间通信的方式，分别是props和$emit、$parent和$children、$refs、事件总线、Vuex和provide和inject。

方式一：props和$emit

props和$emit是vue中非常基础中的通信方式，适用于父子组件通信。父组件通过props向子组件传递数据，子组件通过$emit触发自定义事件与父级通信。

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <p>子组件传递的数据: {{message}}</p>
    <ChildComponent :message="message" @change="handleChange" />
  </div>
</template>

<script>
import ChildComponent from './child.vue';

export default {
  data() {
    return {
      message: 'hello world'
    };
  },
  components: {
    ChildComponent
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h3>子组件</h3>
    <input type="text" v-model="message" @input="handleChange">
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleChange(e) {
      const value = e.target.value;
      this.$emit('change', value);
    }
  }
};
</script>

方式二：$parent和$children

$parent和$children是Vue提供的组件实例属性，用于父子组件通信。子组件通过$this.$parent获取父组件实例，父组件通过$children获取子组件实例。

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './child.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    console.log(this.$children[0].message);
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h3>子组件</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    };
  },
  mounted() {
    console.log(this.$parent.message);
  }
};
</script>

方式三：$refs

$refs是在vue2.0中引入的，用于在子组件中获取父组件中DOM元素或组件实例。通过$refs获取到DOM或组件实例，通过组件内部的方法操作DOM或组件实例。

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <button ref="btn" @click="handleClick">获取子组件中的按钮</button>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './child.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      console.log(this.$refs.child.message);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h3>子组件</h3>
    <button ref="btn">按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    };
  }
};
</script>

方式四：事件总线

事件总线（Event Bus）是Vue中非常常见的一种组件通信方式。通过一个空的Vue实例作为事件中心，用它来触发事件和监听事件，组件之间直接进行事件的发布和订阅。

<!-- EventBus -->
<script>
import Vue from 'vue';

// 创建一个空的Vue实例作为事件中心
const bus = new Vue();

// 将创建的实例导出
export default bus;
</script>

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <button @click="handleClick">触发事件</button>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  methods: {
    handleClick() {
      EventBus.$emit('event', 'hello world');
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h3>子组件</h3>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  mounted() {
    EventBus.$on('event', message => {
      console.log(message);
    });
  }
};
</script>

方式五：Vuex

Vuex是Vue的一个状态管理工具，也是组件间通信的一种方式。数据以全局单例模式管理，组件内部通过getters获取state，通过触发mutations中的方法修改state。

<!-- store -->
<script>
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'hello world'
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  }
});
</script>

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <button @click="handleClick">触发事件</button>
    <p>{{message}}</p>
  </div>
</template>

<script>
import store from './store';

export default {
  computed: {
    message() {
      return store.state.message;
    }
  },
  methods: {
    handleClick() {
      store.commit('setMessage', 'new message');
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h3>子组件</h3>
  </div>
</template>

<script>
import store from './store';

export default {
  computed: {
    message() {
      return store.state.message;
    }
  }
};
</script>

方式六：provide和inject

Vue2.2.0后提供了provide和inject用于父子组件通信，父组件通过provide提供数据，子组件通过inject注入数据。

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent />
  </div>
</template>

<script>
import store from './store';

export default {
  provide: {
    message: 'hello world'
  },
  components: {
    ChildComponent
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h3>子组件</h3>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>