Vue 中如何实现父子组件之间的通信？-Vue.js-PHP中文网

Vue 中如何实现父子组件之间的通信？

王林

发布： 2023-06-11 20:27:30

原创

1830人浏览过

在 vue 中，组件是构建用户界面的重要部分，它们可以方便的将界面分解为更小而可重用的部分。由于一个页面可能包含多个组件，所以组件之间的通信变得很重要。特别是在父组件和子组件之间的通信。

Vue中通过props和$emit两种方式实现父子组件之间的通信。本文将为你介绍这两种方式。

一、props

props是Vue中父组件向子组件传递数据的方式。props是一个数组，数组中存储了要传递给子组件的数据属性。在子组件中，使用props接收从父组件传递来的数据。

props的使用：首先，在父组件中定义props，代码如下：

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

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      parentMsg: "父组件的数据",
    };
  },
  components: {
    Child,
  },
  props: ["parentMsg"], //在父组件中定义props
};
</script>

登录后复制

在上面的代码中，父组件通过props的方式向子组建传递了一个名为message的属性。

立即学习“前端免费学习笔记（深入）”；

然后，在子组件中接收props：

<template>
  <h2>{{ message }}</h2>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true, //props接收的属性必须有值
    },
  },
};
</script>

登录后复制

子组件中，通过props接收了父组件传递过来的message属性。

这时，在父组件的页面会显示出“父组件的数据”这个值。

美间AI

美间AI：让设计更简单

查看详情

二、$emit

$emit是Vue中子组件向父组件传递消息的方式。当子组件发生某些事件时，可以通过$emit来触发父组件的事件方法。$emit方法的第一个参数是要触发的事件名称，第二个参数是要传递给父组件的参数。

$emit的使用：首先，在子组件中，定义一个事件方法，当某个事件触发时，调用$emit方法将消息传递给父组件，代码如下：

<template>
  <button @click="onClick">点击传递消息到父组件</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit("child-msg", "子组件的数据");
    },
  },
};
</script>

登录后复制

在上面的代码中，子组件定义了onClick事件方法，当按钮点击时，会通过$emit方法触发名称为child-msg的事件，并传递“子组件的数据”这个参数。

然后，在父组件中监听这个事件：

<template>
  <div>
    <div>{{ message }}</div>
    <child @child-msg="getChildMsg"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      message: "",
    };
  },
  components: {
    Child,
  },
  methods: {
    getChildMsg(msg) {
      this.message = msg; //监听子组件的事件，获取传递过来的参数
    },
  },
};
</script>

登录后复制

在上面的代码中，父组件使用@符号来监听子组件的事件。一旦子组件触发了child-msg事件，父组件响应事件，并通过getChildMsg方法接收子组件传递过来的数据，然后将数据显示在页面上。

通过上面两种方式，就可以在Vue中实现父子组件之间的通信。代码简洁易懂，易于维护，可以提高组件化开发的效率。

以上就是Vue 中如何实现父子组件之间的通信？的详细内容，更多请关注php中文网其它相关文章！