Vue中父访问子组件数据用emit的示例代码

当一个父组件需要访问其子组件的数据时，可以使用Vue中的emit方法。具体步骤如下：

1. 在子组件中，将需要被访问的数据通过emit方法暴露出去，以供父组件使用。示例代码如下：

// 子组件中
<template>
  <div>
    <h2>{{ title }}</h2>
    <button @click="changeTitle">Change Title</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello World'
    }
  },
  methods: {
    changeTitle() {
      this.title = 'New Title'
      this.$emit('title-changed', this.title)
    }
  }
}
</script>

在上面的示例代码中，当按钮被点击时，子组件会将其内部的title数据通过`this.$emit('title-changed', this.title)`方法暴露出去。

2. 在父组件中，通过监听子组件的emit事件，获取子组件中的数据。示例代码如下：

// 父组件中
<template>
  <div>
    <h1>{{ message }}</h1>
    <child-component @title-changed="onTitleChanged"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Parent Component'
    }
  },
  methods: {
    onTitleChanged(newTitle) {
      console.log(newTitle)
      this.message = newTitle
    }
  }
}
</script>

在上面的示例代码中，父组件通过在子组件上监听`@title-changed`事件来获取子组件中的title数据。一旦子组件的数据发生变化，父组件中的`onTitleChanged`方法就会被调用，从而更新父组件中的数据。