vue实现发送值接受值

Vue 实现父子组件传值

父组件向子组件传值（props）

父组件通过 v-bind 或简写 : 向子组件传递数据。子组件通过 props 接收数据。

父组件代码：

<template>
  <ChildComponent :message="parentMessage" />
</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>

子组件向父组件传值（$emit）

子组件通过 $emit 触发自定义事件，父组件通过 v-on 或简写 @ 监听事件并接收数据。

子组件代码：

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

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

父组件代码：

<template>
  <ChildComponent @message-from-child="handleMessage" />
</template>

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

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

Vue 实现兄弟组件传值

通过共同的父组件中转

兄弟组件之间可以通过共同的父组件作为中介传递数据。子组件A通过 $emit 向父组件发送数据，父组件再通过 props 传递给子组件B。

使用事件总线（Event Bus）

创建一个全局事件总线，用于兄弟组件之间的通信。

创建事件总线：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

组件A发送事件：

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

<script>
import { EventBus } from './event-bus.js';

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

组件B接收事件：

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

<script>
import { EventBus } from './event-bus.js';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message-from-a', (msg) => {
      this.message = msg;
    });
  }
};
</script>

Vuex 状态管理

对于大型应用，可以使用 Vuex 进行全局状态管理。

安装 Vuex：

npm install vuex --save

创建 store：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, payload) {
      state.message = payload;
    }
  },
  actions: {
    updateMessage({ commit }, payload) {
      commit('setMessage', payload);
    }
  },
  getters: {
    getMessage: state => state.message
  }
});

组件A提交 mutation：

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

<script>
export default {
  methods: {
    sendMessage() {
      this.$store.commit('setMessage', 'Hello from Vuex');
    }
  }
};
</script>

组件B获取 state：

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

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

provide/inject 跨层级传值

对于深层嵌套的组件，可以使用 provide 和 inject 进行传值。

祖先组件：

<template>
  <ChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      providedMessage: 'Hello from ancestor'
    };
  }
};
</script>

后代组件：

<template>
  <div>{{ injectedMessage }}</div>
</template>

<script>
export default {
  inject: ['providedMessage'],
  data() {
    return {
      injectedMessage: this.providedMessage
    };
  }
};
</script>