遍历Vue组件字段可以使用Vue提供的内置方法$options来获取组件的配置选项。然后可以使用Object.keys()方法遍历组件的字段。

以下是一个示例代码：

// 组件定义
Vue.component('my-component', {
  props: ['prop1', 'prop2'],
  data() {
    return {
      data1: 'value1',
      data2: 'value2'
    }
  },
  computed: {
    computed1() {
      return this.prop1 + ' computed'
    },
    computed2() {
      return this.prop2 + ' computed'
    }
  },
  methods: {
    method1() {
      console.log(this.prop1 + ' method')
    },
    method2() {
      console.log(this.prop2 + ' method')
    }
  }
})

// 创建Vue实例
new Vue({
  el: '#app',
  template: `
    

      
    
  `,
  mounted() {
    // 遍历组件字段
    const component = this.$children[0]  // 获取第一个子组件实例
    const options = component.$options  // 获取组件配置选项
    const props = options.props || {}  // 获取组件的props字段
    const data = options.data  // 获取组件的data字段
    const computed = options.computed || {}  // 获取组件的computed字段
    const methods = options.methods || {}  // 获取组件的methods字段

    // 遍历props字段
    console.log('props:')
    Object.keys(props).forEach((prop) => {
      console.log(prop)
    })

    // 遍历data字段
    console.log('data:')
    Object.keys(data()).forEach((key) => {
      console.log(key)
    })

    // 遍历computed字段
    console.log('computed:')
    Object.keys(computed).forEach((key) => {
      console.log(key)
    })

    // 遍历methods字段
    console.log('methods:')
    Object.keys(methods).forEach((key) => {
      console.log(key)
    })
  }
})

以上代码中，通过this.$children[0]获取到了第一个子组件实例，然后通过component.$options获取到了组件的配置选项。然后分别遍历了props、data、computed和methods字段，并打印出了字段名。

在控制台中运行以上代码，可以看到输出结果如下：

props:
prop1
prop2
data:
data1
data2
computed:
computed1
computed2
methods:
method1
method2

这样就可以遍历Vue组件的字段了。