vue父向子组件传递数据

在 Vue 中，父组件向子组件传递数据有两种方式：

1. props

通过在子组件中使用 `props` 属性来接收父组件传递的数据。在父组件中，可以通过在子组件标签上使用属性来传递数据，例如：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      hello: 'Hello, world!'
    }
  }
}
</script>

在子组件中，可以使用 `props` 来接收父组件传递的数据：

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

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

2. $emit

通过在子组件中使用 `$emit` 方法来触发自定义事件，并在父组件中监听该事件来接收子组件传递的数据。在子组件中，可以通过调用 `$emit` 方法触发自定义事件，并传递数据，例如：

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

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello, world!')
    }
  }
}
</script>

在父组件中，可以通过在子组件标签上使用 `@message` 来监听该事件，并接收子组件传递的数据：

<template>
  <div>
    <child-component @message="handleMessage"></child-component>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

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

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