何为受控组件(controlled component)

受控组件（Controlled Component）是指其值由React的状态（state）来控制并更新的组件。具体来说，受控组件的值受React状态的控制，也就是说，当用户修改表单元素的值时，React会更新组件的状态，并将其值更新到表单元素中。受控组件通过props传递value或者checked属性来绑定表单元素的值，并通过onChange事件来处理表单元素的变化。这样，父组件可以完全控制子组件的数据流，并在React状态中保存表单数据，从而方便地处理表单验证、提交等操作。

简而言之，受控组件是那些表单数据的值由React状态控制，并在状态更新时反映到DOM中的组件。

如何在Vue中使用受控组件呢

在 Vue 中，并没有像 React 中那样明确区分“受控组件”和“非受控组件”的概念，因为 Vue 的双向数据绑定（v-model）机制本身就提供了一种类似于受控组件的行为。但是，如果你想要更精细地控制组件的输入和输出，或者实现类似 React 中受控组件的功能，你可以通过监听输入事件并手动更新数据来实现。

下面是一个在 Vue 中使用类似受控组件的示例：

<template>  
  <div>  
    <!-- 使用 v-model 绑定数据，但这只是双向数据绑定的简化方式 -->  
    <!-- 如果需要更精细的控制，可以分别使用 :value 和 @input -->  
    <input  
      type="text"  
      :value="controlledValue"  
      @input="updateValue($event.target.value)"  
      placeholder="输入受控值"  
    />  
    <p>受控值：{{ controlledValue }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      controlledValue: '', // 这里是受控的值  
    };  
  },  
  methods: {  
    updateValue(newValue) {  
      // 在这里可以进行一些额外的逻辑处理，比如验证  
      this.controlledValue = newValue; // 更新受控值  
    },  
  },  
};  
</script>

在这个例子中，我们没有直接使用 v-model，而是分别使用了 :value 来绑定输入元素的值到组件的 data 属性 controlledValue，并使用 @input 事件监听器来在输入变化时调用 updateValue 方法。在 updateValue 方法中，我们可以进行任何必要的逻辑处理（比如验证），然后更新 controlledValue。

虽然 Vue 提供了 v-model 作为双向数据绑定的便捷方式，但在某些情况下，你可能想要更直接地控制输入和输出的行为，这时就可以采用上述的类似受控组件的方法。不过，请注意，在大多数情况下，直接使用 v-model 就足够了，它提供了简洁且强大的双向数据绑定功能。