[vue] vue组件之间的通信都有哪些？

[undefinedYu]

[vue] vue组件之间的通信都有哪些？

[xn213]

• 父子Coms: 1/2/3 ..
• 兄弟Coms: 4/5
• 跨级Coms: 4/5/6/7
  1. props
  2. $emit/$on
  3. ( $parents/$children ) / $refs
  4. Vuex
  5. Bus
  6. ( provide/inject )
  7. ( $attrs/$listeners )

[MachineDream]

1. props
2. emit
3. ref
4. vuex
5. bus

[qp97vi]

1.父传子 props 2.子传父 $emit 3.Vuex 状态管理器 4.bus

[crush2020]

父传子 props 子传父 $emit 状态管理器 vuex 任意两个组件间通信 bus ref

[yxllovewq]

总结：

1. props
2. $on\$emit
3. $parent、$children、$refs
4. bus
5. vuex
6. provide、inject
7. $attrs、$listeners

父子:1/2/3 兄弟：4/5 组件层层嵌套: 4/5/6

[Cai-zhiji]

Props(父子组件通信)

父组件可以通过Props将数据传递给子组件。子组件通过props选项声明需要接收的属性，并可以在模板中使用这些属性。父组件通过在子组件标签上绑定属性的方式传递数据给子组件。 父组件

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
}
</script>

子组件

<template>
  <div>
    {{ message }}
  </div>
</template>

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

自定义事件(子组件向父组件通信)

子组件可以通过触发自定义事件来向父组件通信。父组件可以通过v-on指令监听子组件触发的事件，并在对应的方法中处理数据。

子组件

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child');
    }
  }
}
</script>

父组件

<template>
  <div>
    <ChildComponent @message-sent="handleMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message); // Output: Hello from child
    }
  }
}
</script>

Vuex(跨组件通信)

Vuex是Vue的官方状态管理库，用于管理应用程序的状态。通过定义全局的状态和在组件中派发（dispatch）和监听（commit）事件，可以实现多个组件之间的通信。Vuex适用于大型应用或需要多个组件共享数据的情况。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    changeMessage({ commit }, newMessage) {
      commit('updateMessage', newMessage);
    }
  },
  getters: {
    getMessage(state) {
      return state.message;
    }
  }
});

// ParentComponent.vue
<template>
  <div>
    {{ message }}
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getMessage']),
    message() {
      return this.getMessage;
    }
  },
  methods: {
    ...mapActions(['changeMessage'])
  }
}
</script>

其他

事件总线、Provide/Inject、订阅/发布模式