组件双向绑定

   <div class="list-header">
      <h3>{{ title || '分类图片列表' }}</h3>
      <el-button type="primary" @click="handleAddNew" :disabled="disabled">
        {{ addButtonText || '新增' }}
      </el-button>
    </div>

<script>
export default {
  name: 'CategoryImageList',
  props: {
    // v-model绑定的数据
    value: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      // 内部数据副本
      internalData: []
    }
  },
  watch: {
    // 监听value变化，同步到内部数据
    value: {
      handler(newVal) {
        this.internalData = [...newVal]
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 处理新增按钮点击
    handleAddNew() {
      this.$emit('add-new')
    },

    // 通知父组件数据变化
    notifyDataChange() {
      this.$emit('input', [...this.internalData])
      this.$emit('change', [...this.internalData])
    }
  }
}
</script>