在 Vue 中，受控组件和非受控组件是指组件在处理表单数据时的不同方式。

一个受控组件是一个由 Vue 组件管理其值的表单控件。这意味着组件的值是由组件的 data 属性中的数据所控制的。当值发生变化时，组件将更新 data 中的值，并且可以通过 v-model 指令来实现双向数据绑定。例如，下面的代码演示了一个受控的文本框组件：

<template>
  <input type="text" v-model="value" />
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>

在这个例子中，输入框的值由 Vue 实例中的 value 属性控制，并且任何对输入框的更改都会更新 value 属性的值。

相比之下，非受控组件是一个由 DOM 管理其值的表单控件。这意味着组件的值不受 Vue 组件的控制，而是由实际的 DOM 元素来管理。例如，下面的代码演示了一个非受控的文本框组件：

<template>
  <input type="text" ref="myInput" />
</template>

<script>
export default {
  mounted() {
    this.$refs.myInput.value = 'default value'
  }
}
</script>

在这个例子中，文本框的值由 DOM 元素的 value 属性管理，而不是由 Vue 组件控制。组件在挂载时设置了文本框的默认值，但是任何对文本框的更改都不会更新组件中的数据。

总之，受控组件是由 Vue 组件控制其值的表单控件，而非受控组件则是由实际的 DOM 元素控制其值的表单控件。在大多数情况下，受控组件是更好的选择，因为它允许您更好地控制表单数据并更轻松地进行双向数据绑定。