Vue2中扩展Vuetify VAutocomplete组件如何设置内部loading prop的值

方案1：兼容父级传值 + 内部控制（推荐） #

你可以在组件内新增本地状态控制加载，再通过同名计算属性覆盖原来的loading prop的读取逻辑，既可以保留父组件传值的能力，也能实现内部修改加载状态的需求，不会触发prop修改警告：

<script>
import VAutocomplete from 'vuetify/lib/components/VAutocomplete'
export default VAutocomplete.extend({
  name: 'CustomSelect',
  data() {
    return {
      // 内部维护的loading状态
      innerLoading: false
    }
  },
  computed: {
    // 同名计算属性优先级高于继承来的prop，覆盖原有读取逻辑
    loading() {
      // 不需要父级控制的话直接返回this.innerLoading即可
      return this.$props.loading ?? this.innerLoading
    }
  },
  methods: {
    methodWithLoading() {
      this.innerLoading = true
      // 执行业务逻辑
      // ...
      this.innerLoading = false
    },
  },
})
</script>

方案2：完全内部控制（不需要父级传值场景） #

如果你完全不需要父组件控制loading属性，也可以直接修改组件的props定义，把loading从prop列表里移除，改成内部data属性即可：

<script>
import VAutocomplete from 'vuetify/lib/components/VAutocomplete'
export default VAutocomplete.extend({
  name: 'CustomSelect',
  data() {
    return {
      loading: false
    }
  },
  // 从props中删除原来的loading定义，避免冲突警告
  beforeCreate() {
    delete this.$options.props.loading
  },
  methods: {
    methodWithLoading() {
      this.loading = true
      // 执行业务逻辑
      // ...
      this.loading = false
    },
  },
})
</script>

内容的提问来源于stack exchange，提问作者tetelevm