自定义组件使用v-model.trim

自定义组件使用v-model.trim的方法如下：
1. 在自定义组件中，使用`$emit`方法触发一个名为`input`的事件，并将当前输入框的值作为参数传递给父组件。
2. 在父组件中，使用`v-model`指令绑定自定义组件的值，并在绑定时添加`.trim`修饰符。

下面是一个示例代码：

<!-- 子组件 -->
<template>
  <div>
    <input type="text" :value="value" @input="updateValue($event.target.value)">
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateValue(value) {
      // 触发 input 事件并传递当前输入框的值
      this.$emit('input', value.trim())
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <my-input v-model.trim="inputValue"></my-input>
  </div>
</template>

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

export default {
  components: {
    MyInput
  },
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

在上面的示例中，子组件是一个简单的输入框组件，父组件中使用了`v-model.trim`指令来绑定子组件的值，并且在子组件中触发了一个名为`input`的事件，将输入框的值传递给父组件。