Vue 传参调用

在 Vue 中，我们可以通过 props 传递参数到子组件中，也可以通过 $emit 方法在子组件中触发事件并传递参数到父组件中。

下面是一个简单的示例：

父组件中：

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

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from parent component!',
    };
  },
  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() {
      const newMessage = 'Hello from child component!';
      this.$emit('update-message', newMessage);
    },
  },
};
</script>

在上面的示例中，父组件通过 props 将 parentMessage 传递给了子组件，并通过 @update-message 监听子组件触发的 update-message 事件。子组件中，通过 $emit 方法触发 update-message 事件并传递了一个新的消息。父组件中的 updateParentMessage 方法接收到了这个消息并更新了 parentMessage 的值。