Vue 组件数据清空方法：三种常用技巧

在 Vue 中，可以通过以下几种方式来清空组件中的数据：

1. 使用 `v-model` 指令绑定数据

在需要清空数据的时候，将绑定的数据设置为初始值或者空值。

<template>
  <div>
    <input v-model='inputData' type='text' />
    <button @click='clearData'>清空数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputData: ''
    };
  },
  methods: {
    clearData() {
      this.inputData = '';
    }
  }
};
</script>

2. 使用 `this.$refs` 获取组件引用

通过引用来清空组件中的数据。

<template>
  <div>
    <input ref='inputRef' type='text' />
    <button @click='clearData'>清空数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    clearData() {
      this.$refs.inputRef.value = '';
    }
  }
};
</script>

3. 使用 `this.$emit` 触发自定义事件

在父组件中监听该事件，并在事件处理函数中清空子组件中的数据。

子组件：

<template>
  <div>
    <input v-model='inputData' type='text' />
    <button @click='clearData'>清空数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputData: ''
    };
  },
  methods: {
    clearData() {
      this.inputData = '';
      this.$emit('clear');
    }
  }
};
</script>

父组件：

<template>
  <div>
    <child-component @clear='clearChildData'></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    clearChildData() {
      // 清空子组件的数据
    }
  }
};
</script>

以上是三种常见的清空组件数据的方法，根据具体的需求和场景，选择合适的方式来清空数据。