vu e中父子组件传值

在 Vue 中，父组件可以通过 props 属性向子组件传递数据。子组件可以通过 $emit 方法向父组件发送事件。

以下是一个简单的例子：

父组件：

<template>
  <div>
    <child :message="parentMessage" @update-message="updateParentMessage" />
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  data() {
    return {
      parentMessage: "Hello from parent",
    };
  },
  methods: {
    updateParentMessage(message) {
      this.parentMessage = message;
    },
  },
};
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  methods: {
    updateMessage() {
      this.$emit("update-message", "New message from child");
    },
  },
};
</script>

在这个例子中，父组件通过 props 将 parentMessage 数据传递给子组件。子组件接收该数据，并将其显示在页面上。当用户点击子组件中的按钮时，子组件通过 $emit 方法向父组件发送事件，并将新的消息作为参数传递。父组件接收该事件并更新 parentMessage 数据。由于数据的更新，页面上的消息也会更新。