vue3父子组件传值

在Vue3中，父子组件间的传值可以通过props和emit实现。

1. 使用props实现父组件向子组件传值：

在父组件中，通过子组件的props属性将数据传递给子组件，示例代码如下：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '这是父组件的消息'
    }
  }
}
</script>

在子组件中，可以通过props接收父组件传递过来的数据，示例代码如下：

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

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  }
}
</script>

2. 使用emit实现子组件向父组件传值：

在子组件中，通过emit方法触发一个自定义事件，并将数据传递给父组件，示例代码如下：

<template>
  <div>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('send-message', '这是子组件发送的消息');
    }
  }
}
</script>

在父组件中，可以通过v-on指令监听子组件触发的自定义事件，并通过$event获取子组件传递过来的数据，示例代码如下：

<template>
  <div>
    <child-component @send-message="receiveMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log(message);
    }
  }
}
</script>