vue组件之间的传值

在 Vue 中，组件之间传值有多种方式，以下是常见的几种：

父子组件传值

• 父组件向子组件传值

  • 使用 props：在父组件中，通过在子组件标签上以自定义属性的形式绑定数据，子组件通过props选项来接收父组件传递的值。例如，父组件Parent.vue中有一个message数据，要传递给子组件Child.vue，在Parent.vue中可以这样写：

html

<template>
  <div>
    <child :message="message"></child>
  </div>
</template>

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

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

在Child.vue中通过props接收：

html

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

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

• 子组件向父组件传值

  • 使用自定义事件：子组件通过$emit方法触发自定义事件，并传递数据，父组件在子组件标签上通过v-on指令监听自定义事件来接收数据。例如，子组件Child.vue有一个按钮，点击按钮时向父组件传递数据，在Child.vue中可以这样写：

html

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

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

在父组件Parent.vue中监听自定义事件：

html

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

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

export default {
  components: {
    Child
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
};
</script>

兄弟组件传值

• 使用事件总线

  • 创建一个EventBus实例，在需要传递数据的兄弟组件中，一个组件通过$emit方法在EventBus上触发事件并传递数据，另一个组件通过$on方法在EventBus上监听事件来接收数据。首先创建eventBus.js文件：

javascript

import Vue from 'vue';

export const EventBus = new Vue();

然后在组件Brother1.vue中触发事件：

html

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

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

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

在组件Brother2.vue中监听事件：

html

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

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

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    EventBus.$on('message-from-brother1', (message) => {
      this.message = message;
    });
  },
  beforeDestroy() {
    EventBus.$off('message-from-brother1');
  }
};
</script>

跨多级组件传值

• 使用 provide 和 inject

  • 在祖先组件中通过provide选项提供数据，后代组件中通过inject选项注入数据。例如，祖先组件Ancestor.vue提供数据：

html

<template>
  <div>
    <child></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  provide() {
    return {
      message: 'Hello from ancestor'
    };
  }
};
</script>

后代组件Descendant.vue注入数据：

html

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

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