父组件获取子组件数据

父组件获取子组件数据的方法有多种，以下是其中两种常用的方法：

1.使用refs获取子组件实例，然后通过子组件实例调用子组件的方法或获取子组件的数据。

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    sendMessage() {
      this.$emit('send-message', this.message)
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child ref="child"></child>
    <button @click="getChildData">获取子组件数据</button>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  methods: {
    getChildData() {
      const childComponent = this.$refs.child
      const message = childComponent.message
      console.log(message)
    }
  }
}
</script>

2.使用事件机制，在子组件中定义一个自定义事件，并在父组件中监听该事件，当子组件触发该事件时，将数据通过事件参数传递给父组件。

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    sendMessage() {
      this.$emit('send-message', this.message)
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child @send-message="getChildData"></child>
    <button @click="getChildData">获取子组件数据</button>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  methods: {
    getChildData(message) {
      console.log(message)
    }
  }
}
</script>