vue中组件之间相互传值的6种方法小结

<template>
  <ChildComponent :parentValue="valueFromParent" />
</template>

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

export default {
  data() {
    return {
      valueFromParent: '这是父组件的数据'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

<template>
  <div>{{ parentValue }}</div>
</template>

<script>
export default {
  props: {
    parentValue: String // 接收并展示来自父组件的值
  }
};
</script>

<template>
  <button @click="emitValue">点击传递数据</button>
</template>

<script>
export default {
  methods: {
    emitValue() {
      this.$emit('childEvent', '这是子组件传递的数据');
    }
  }
};
</script>

<template>
  <ChildComponent @childEvent="handleChildEmit" />
</template>

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

export default {
  methods: {
    handleChildEmit(value) {
      console.log('接收到子组件的数据:', value);
      // 更新父组件状态等操作
    }
  },
  components: {
    ChildComponent
  }
};
</script>

<template>
  <div ref="childRef">...</div>
  <button @click="sendData">发送数据</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('dataSent', this.someData);
    }
  }
};
</script>

<template>
  <ChildComponent ref="child" @dataSent="handleData" />
</template>

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

export default {
  methods: {
    handleData(data) {
      console.log('通过事件接收的数据:', data);
    },
    callChildMethod() {
      // 使用 $refs 访问子组件实例并调用方法
      this.$refs.child.sendData();
    }
  },
  components: {
    ChildComponent
  }
};
</script>

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    sharedData: null
  },
  mutations: {
    setSharedData(state, data) {
      state.sharedData = data;
    }
  },
  actions: {
    updateSharedData({ commit }, newData) {
      commit('setSharedData', newData);
    }
  },
  getters: {
    getSharedData(state) {
      return state.sharedData;
    }
  }
});

// 任何组件内
<template>
  <button @click="updateData">更新共享数据</button>
  <AnotherComponent />
</template>

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

export default {
  computed: {
    ...mapGetters(['getSharedData'])
  },
  methods: {
    ...mapActions(['updateSharedData']),
    updateData() {
      this.updateSharedData({ some: 'new data' });
    }
  }
};
</script>

// eventBus.js
import Vue from 'vue';

export const EventBus = new Vue();

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { EventBus } from './eventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('customEvent', { message: 'Hello from component A!' });
    }
  }
};
</script>

<script>
import { EventBus } from './eventBus';

export default {
  created() {
    EventBus.$on('customEvent', (data) => {
      console.log('Received message:', data.message);
    });
  },
  beforeDestroy() {
    // 不要忘记在组件销毁时解绑事件监听器以避免内存泄漏
    EventBus.$off('customEvent');
  }
};
</script>

<script>
export default {
  provide() {
    return {
      ancestorData: this.someData
    };
  },
  data() {
    return {
      someData: '来自祖先的数据'
    };
  }
};
</script>

<script>
export default {
  inject: ['ancestorData'],
  mounted() {
    console.log('从祖先获取的数据:', this.ancestorData);
  }
};
</script>