父子组件传值vue3

在Vue 3中，父子组件之间传值可以通过props和emit来实现。下面是一种常见的父子组件传值方式：

1. 父组件通过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 component'
    };
  }
};
</script>

在子组件中，可以通过props接收父组件传递的数据。例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

这样，父组件中的`parentMessage`会传递给子组件的`message`属性。

2. 子组件通过emit向父组件传递数据：
在子组件中，可以通过`$emit`方法触发一个自定义事件，并将需要传递给父组件的数据作为参数传递。例如：

<template>
  <div>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-to-parent', 'Hello from child component');
    }
  }
};
</script>

在父组件中，可以通过在子组件标签上监听自定义事件的方式接收子组件传递的数据。例如：

<template>
  <div>
    <child-component @message-to-parent="handleMessageFromChild"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessageFromChild(message) {
      console.log(message); // 输出：Hello from child component
    }
  }
};
</script>

这样，子组件中通过`$emit`方法触发的`message-to-parent`事件会被父组件中的`handleMessageFromChild`方法捕获，并将子组件传递的数据作为参数传递给该方法。