父子组件传值

父子组件之间传值通常有两种方式：props和emit。

使用props传值：父组件通过props将数据传递给子组件。在子组件中，通过定义props来接收父组件传递的数据。例如：

父组件：

<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

子组件：

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

<script>
export default {
  props: ['message']
}
</script>

使用emit传值：子组件通过emit事件将数据传递给父组件。在子组件中，使用$emit方法触发一个自定义事件，并传递需要传递的数据。在父组件中，通过在子组件标签上监听自定义事件，并通过事件参数接收子组件传递的数据。例如：

父组件：

<template>
  <div>
    <ChildComponent @message-updated="updateMessage" />
    <p>Message from child component: {{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

子组件：

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

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-updated', 'Hello World');
    }
  }
}
</script>

以上是两种常见的父子组件传值方式，根据具体场景和需求选择合适的方式进行数据传递