Vuex及Vue组件通信

Vuex及Vue组件通信

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证
状态以一种可预测的方式发生变化。
通俗点说就是不用考虑组件之间的嵌套关系（例如：父子、祖孙、兄弟等），就可以让组件之间进行互相通信。

组件五把数据存储到Vuex共享状态中，组件六使用数据的话就可以再从Vuex共享状态中进行获取，从而完成组件之间的通信。这
种通信方式不需要考虑组件之间的嵌套关系，所以通信起来会更加的灵活。

Vue 组件通信

1. 父子通信：props 与 emits

在父子组件之间进行通信是最常见的场景。父组件通过 props 将数据传递给子组件，子组件通过 emits 事件将数据发送给父组件。

示例：

// Parent.vue
<template>
  <div>
    <Child :message="message" @update-message="updateMessage" />
  </div>
</template>
 
<script>
import Child from './Child.vue';
 
export default {
  data() {
    return {
      message: 'Hello from parent',
    };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    },
  },
  components: {
    Child,
  },
};
</script>
 
// Child.vue
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
 
<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update-message', 'Hello from child');
    },
  },
};
</script>

在上面的示例中，父组件通过 :message="message" 将 message 属性传递给子组件，子组件通过 $emit 方法触发 update-message 事件，并将新的消息作为参数传递给父组件的 updateMessage 方法。

2. 跨组件通信：provide 与 inject

在跨组件层级的通信场景中，可以使用 provide 和 inject 来实现。父组件通过 provide 提供数据，子组件通过 inject 注入数据。

示例：

// Parent.vue
<template>
  <div>
    <Child />
  </div>
</template>
 
<script>
import Child from './Child.vue';
 
export default {
  provide: {
    message: 'Hello from parent',
  },
  components: {
    Child,
  },
};
</script>
 
// Child.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
 
<script>
export default {
  inject: ['message'],
};
</script>

在上面的示例中，父组件通过 provide 选项提供了一个名为 message 的数据，子组件通过 inject 选项注入了这个数据，并可以在模板中直接使用。

3. $attrs

$attrs 是一个特殊的属性，用于在组件之间传递父组件中未被子组件 prop 所接收的属性。

示例：

// Parent.vue
<template>
  <div>
    <Child v-bind="$attrs" />
  </div>
</template>
 
<script>
import Child from './Child.vue';
 
export default {
  components: {
    Child,
  },
};
</script>
 
// Child.vue
<template>
  <div>
    <p>{{ $attrs.message }}</p>
  </div>
</template>

在上面的示例中，父组件通过 v-bind="$attrs" 将所有未被子组件接收的属性传递给子组件，子组件可以通过 $attrs 访问这些属性。

4. $refs

$refs 是一个特殊的属性，用于在父组件中访问子组件的实例或 DOM 元素。

示例：

// Parent.vue
<template>
  <div>
    <Child ref="childRef" />
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
 
<script>
import Child from './Child.vue';
 
export default {
  methods: {
    sendMessage() {
      this.$refs.childRef.receiveMessage('Hello from parent');
    },
  },
  components: {
    Child,
  },
};
</script>
 
// Child.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    receiveMessage(message) {
      this.message = message;
    },
  },
};
</script>

在上面的示例中，父组件通过 ref 属性给子组件指定一个引用名称，然后可以通过 this.$refs.childRef 访问子组件的实例。父组件可以直接调用子组件的方法或访问子组件的数据。

5. Vuex 状态管理

Vuex 是 Vue.js 的官方状态管理库，用于管理应用程序的共享状态。通过 Vuex，不同组件之间可以共享和修改状态。

示例：

// store.js
import { createStore } from 'vuex';
 
const store = createStore({
  state() {
    return {
      message: 'Hello from store',
    };
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    },
  },
});
 
export default store;

// Parent.vue
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
 
<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    },
  },
  methods: {
    updateMessage() {
      this.$store.commit('updateMessage', 'New message from parent');
    },
  },
};
</script>

在上面的示例中，我们创建了一个 Vuex 的 store，其中包含一个名为 message 的状态和一个名为 updateMessage 的 mutation。在父组件中，通过 this.$store.state.message 访问状态，并通过 this.$store.commit 调用 mutation 来修改状态。

以上是一些常见的 Vue 组件通信方案。根据具体的场景和需求，选择适合的方案来实现组件之间的通信。