vue clearable 联动

可以通过Vue的数据绑定来实现vue clearable联动。具体操作如下：

1. 在父组件中定义一个clearable的数据属性，用来控制子组件是否显示清除按钮。

2. 在子组件中定义一个props属性，用来接受父组件传递过来的clearable数据属性。

3. 在子组件的template中，根据clearable的值来控制清除按钮的显示和隐藏。

4. 在清除按钮的点击事件中，触发父组件的清空操作。

具体代码如下：

父组件：

<template>
  <div>
    <input v-model="inputValue" />
    <child-component :clearable="clearable" @clear="handleClear" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      inputValue: '',
      clearable: false
    }
  },
  methods: {
    handleClear() {
      this.inputValue = ''
    }
  },
  watch: {
    inputValue(newVal) {
      this.clearable = newVal !== ''
    }
  }
}
</script>

子组件：

<template>
  <div>
    <input v-model="inputValue" />
    <span v-if="clearable" @click="$emit('clear')">清除</span>
  </div>
</template>

<script>
export default {
  props: {
    clearable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>