vue2中父子组件传值的方式有哪些

在Vue2的开发中，父子组件之间的传值是非常常见且重要的操作。下面将详细介绍几种常见的父子组件传值方式。

1. props方式

这是Vue中最基本也是最常用的父向子组件传值的方式。父组件通过在子组件标签上绑定自定义属性，将数据传递给子组件。子组件通过props选项来接收这些数据。例如：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

子组件通过props接收：

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: ['message']
};
</script>

2. $emit方式

当子组件需要向父组件传递数据时，通常使用$emit方法。子组件通过$emit触发一个自定义事件，并传递数据，父组件通过在子组件标签上监听这个事件来接收数据。例如：

<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('child-message', 'Hello from child');
    }
  }
};
</script>

父组件监听事件：

<!-- 父组件 -->
<template>
  <div>
    <child-component @child-message="receiveMessage"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log(message);
    }
  }
};
</script>

3. 事件总线（Event Bus）

如果项目中存在复杂的组件嵌套关系，且需要在不相关的组件之间传递数据，可以使用事件总线。通过创建一个空的Vue实例作为事件中心，组件之间可以通过它来发布和监听事件。

掌握这些父子组件传值方式，能更好地进行Vue2项目的开发，实现组件之间的数据交互和通信。