vue父子之间是如何通讯的

在 Vue.js 中，父子组件之间的通讯主要通过1、props和2、$emit两种方式来实现。1、props用于父组件向子组件传递数据，2、$emit用于子组件向父组件发送消息。下面是详细解释：

1、props传递数据：在父组件中，通过在子组件标签上绑定属性的方式，将数据传递给子组件。子组件通过props接收这些数据，并在模板或逻辑中使用。例如，父组件传递一个标题给子组件，子组件根据传入的标题显示内容。

一、`props`传递数据

父组件可以通过props向子组件传递数据。具体步骤如下：

在父组件中定义子组件，并在子组件标签上绑定属性。
在子组件中，通过props接收传递的数据。

例如，父组件传递一个标题给子组件：

<!-- 父组件 -->
<template>
  <div>
    <child-component :title="parentTitle"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentTitle: '父组件的标题'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
};
</script>

通过这种方式，父组件的parentTitle数据被传递到子组件，并在子组件中显示。

二、`$emit`发送消息

子组件可以通过$emit向父组件发送消息。具体步骤如下：

在子组件中，通过$emit触发一个自定义事件，并传递相关数据。
在父组件中，监听子组件的自定义事件，并在事件回调中处理传递的数据。

例如，子组件发送一个事件通知父组件：

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', '子组件发送的消息');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @message="handleMessage"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(msg) {
      console.log('接收到子组件的消息:', msg);
    }
  }
};
</script>

通过这种方式，父组件能够接收到子组件发送的消息，并在回调中处理。

三、`refs`获取子组件实例

父组件可以通过refs获取子组件的实例，从而直接调用子组件的方法或访问子组件的数据。具体步骤如下：

在子组件标签上添加ref属性。
在父组件中，通过this.$refs访问子组件实例。

例如，父组件调用子组件的方法：

<!-- 子组件 -->
<template>
  <div>
    <p>子组件内容</p>
  </div>
</template>
<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件的方法被调用');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
};
</script>

通过这种方式，父组件能够直接调用子组件的方法。

四、`provide/inject`传递数据

在 Vue 2.2.0+ 中，可以使用provide和inject来实现祖先组件和后代组件之间的数据传递。具体步骤如下：

在祖先组件中，通过provide提供数据。
在后代组件中，通过inject接收数据。

例如，祖先组件传递数据给后代组件：

<!-- 祖先组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: '来自祖先组件的数据'
    };
  }
};
</script>

<!-- 后代组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
};
</script>

通过这种方式，后代组件能够接收到祖先组件提供的数据。

五、`Event Bus`事件总线

在 Vue 2.x 中，可以使用Event Bus实现组件之间的通信。具体步骤如下：

创建一个事件总线实例。
在组件中，通过事件总线触发和监听事件。

例如，使用事件总线实现通信：

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

<!-- 组件A -->
<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>
<script>
import { EventBus } from './eventBus';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', '组件A发送的消息');
    }
  }
};
</script>

<!-- 组件B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import { EventBus } from './eventBus';
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message', (msg) => {
      this.message = msg;
    });
  }
};
</script>

通过这种方式，组件A发送消息，组件B接收并处理消息。

六、`Vuex`状态管理

在 Vue 应用中，可以使用 Vuex 实现组件之间的状态管理和数据共享。具体步骤如下：

创建 Vuex 存储。
在组件中，通过 Vuex 存储访问和修改状态。

例如，使用 Vuex 实现状态管理：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    message: 'Vuex 中的数据'
  },
  mutations: {
    setMessage(state, msg) {
      state.message = msg;
    }
  }
});

<!-- 组件A -->
<template>
  <div>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  methods: {
    ...mapMutations(['setMessage']),
    updateMessage() {
      this.setMessage('组件A 更新的消息');
    }
  }
};
</script>

<!-- 组件B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['message'])
  }
};
</script>

通过这种方式，组件A更新消息，组件B自动响应并显示更新后的消息。

总结：Vue.js 中父子组件之间的通讯主要通过props传递数据和$emit发送消息来实现。此外，还可以使用refs获取子组件实例、provide/inject传递数据、Event Bus事件总线以及 Vuex 状态管理来实现更复杂的组件通讯需求。根据具体的应用场景，选择合适的通讯方式可以提高开发效率和代码可维护性。建议在项目中合理使用这些方式，以实现组件之间的高效通讯和数据共享。